web - 如何使趋势线在谷歌折线图中虚线？

Question

我正在尝试在我的网站中使用趋势线，并希望将其设为虚线，但 lineDashStyle 在趋势线选项下不起作用。是否可以使趋势线成为虚线？

Answer 1

没有用于修改趋势线虚线样式的标准图表选项
但是，可以在图表的 'ready' 上手动更改图表。事件

趋势线将由 svg <path> 表示元素，一旦找到，
设置属性 stroke-dasharray到你想要的破折号样式

path.setAttribute('stroke-dasharray', '5, 5');

(MDN 网络文档 --> stroke-dasharray)

请参阅以下工作片段，
趋势线的颜色用于查找 <path>元素，
使用图表选项设置颜色 --> trendlines.n.color哪里 n是趋势线的系列指数...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value'],
    [new Date(2017, 02,10),100],
    [new Date(2017, 02,21),150],
    [new Date(2017, 02,28),160],
    [new Date(2017, 03,07),150],
    [new Date(2017, 03,14),125],
    [new Date(2017, 03,23),130],
    [new Date(2017, 03,31),135],
    [new Date(2017, 04,07),140],
    [new Date(2017, 04,26),145],
    [new Date(2017, 05,03),130],
    [new Date(2017, 05,10),150],
    [new Date(2017, 05,17),165],
    [new Date(2017, 05,25),175],
    [new Date(2017, 06,05),180],
    [new Date(2017, 06,12),100]
  ]);

  var options = {
    chartArea: {
      bottom: 48,
      height: '100%',
      left: 48,
      right: 16,
      top: 48,
      width: '100%'
    },
    colors: ['#c3d5bc'],
    hAxis: {
      format: 'M/d/yy',
      slantedText: 'true'
    },
    height: '100%',
    legend: {
      alignment: 'start',
      position: 'top'
    },
    trendlines: {
      0: {
        color: '#344f35',
        type: 'linear'
      }
    },
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.AreaChart(container);

  // change trendline to dashed
  google.visualization.events.addListener(chart, 'ready', function () {
    var pathElements = container.getElementsByTagName('path');
    Array.prototype.forEach.call(pathElements, function(path) {
      if (path.getAttribute('stroke') === options.trendlines[0].color) {
        path.setAttribute('stroke-dasharray', '5, 5');
      }
    });
  });

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意:对图表所做的手动更改将不会显示，
使用图表方法时 --> getImageURI -- 生成图表的图像
使用 html2canvas反而...