javascript 仅显示趋势线(使用Google图表或其他)

f0brbegy  于 2022-12-25  发布在  Java
关注(0)|答案(1)|浏览(128)

在这里,我试图显示图表(JQuery使用谷歌图表)一个或多个趋势线相关的值,我从我的数据库(PHP)。我可以创建我的图表,显示类似5线。这些是一些日期的值,我发现如何显示趋势线使用日期。我的问题是:我不想要数据线,这不是我的兴趣,我只想要趋势线,但我似乎找不到一种方法...
我没有把任何代码在这里,但在结束代码是不需要的,我会提供它,如果一个解决方案的建议,使它可以适用于该特定情况。谢谢你的帮助!
我试着隐藏线条,但是当我删除所有系列时,我显示了一个错误,说没有足够的数据来创建图表。我还试着将不透明度设置为0,但是显示变得非常奇怪!
这是仅数据显示enter image description here
这是显示趋势线enter image description here正如你所看到的,变得很难区分什么是数据,什么是趋势线,它变得太重了。
尝试将不透明度:0到所有系列enter image description here这不再有意义了...正如您所知,在

var chart = new google.visualization.LineChart(document.getElementById(this_kpi + '__' + this_aggreg));
chart.draw(data, options);

我补充道:

view = new google.visualization.DataView(data);
view.setColumns([
    1, 2, 3, 4, 5,
    {
         calc: function (data, row) {
                 var opacity  = 'opacity: 0;'
         },
         type: 'string',
         role: 'style'
     }
]);
chart.draw(view, options);

作为一个提醒,我想坚持的方式并不真正重要,我试图做的是只显示每个系列的趋势线,仅此而已

y1aodyip

y1aodyip1#

谢谢你@WhiteHat!它运行得很完美!我只是不得不遵循同样的逻辑来处理趋势线,因为它们最终也是透明的:这里是完整的代码“选项”达到我的目标

var options = {
  trendlines: {
    0: {
      visibleInLegend: true,
      color:"blue",
    },
    1: {
      visibleInLegend: true,
      color:"red",
    },
    2: {
      visibleInLegend: true,
      color:"green",
    },
    3: {
      visibleInLegend: true,
      color:"orange",
    },
    4: {
      visibleInLegend: true,
      color:"purple",
    },
  },
  animation: {
    startup: true,   /* Need to add this for animations */
    duration: 1000,
    easing: 'out',
  },
  title: this_kpi + " - " + this_aggreg,
  smoothline: 'true',
  curveType: 2,
  legend: { position: 'bottom' },
  colors: ['transparent', 'transparent', 'transparent', 'transparent', 'transparent']
};

相关问题