Question

我在我的项目中使用谷歌折线图，并面临一个问题，我需要更改某些段的颜色，以便可视化目标状态随时间的变化。它应该如下所示：

我搜索了很长时间但是用谷歌图表找不到办法。我的解决方法是在图表中添加另一个系列，并根据状态交替地将第二行eq的值设置为第一行，但它看起来很乏味。

有没有正确的方法呢？以下是我的解决方案解决方案示例：

function drawMultipleTrendlineChart() {

  var chart;

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sales value A');
  data.addColumn('number', 'Sales value B');

  data.addRows([
    [new Date(2013, 3, 11), 200, 0],
    [new Date(2013, 4, 02), 500, 0],
    [new Date(2013, 5, 03), 700, 0],
    [new Date(2013, 6, 04), 800, 800],
    [new Date(2013, 7, 05), 500, 500],
    [new Date(2013, 8, 06), 900, 0],
    [new Date(2014, 0, 07), 800, 0],
    [new Date(2014, 1, 08), 1100, 1100],
    [new Date(2014, 2, 09), 1000, 1000],
    [new Date(2014, 2, 10), 1000, 0],
    [new Date(2014, 3, 11), 800, 0],
  ]);


  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    prefix: 'R$:'
  });
  formatter.format(data, 1);
  var dateFormatter = new google.visualization.NumberFormat({
    pattern: 'MMM yyyy'
  });
  dateFormatter.format(data, 0);
  var chartHeight = 400;
  var chartWidth = 600;
  var chartOptions = {
    tooltip: {
      isHtml: true
    },
    title: 'Trendlines with multiple lines',
    isStacked: true,
    width: chartWidth,
    height: chartHeight,
    colors: ['#0000D8', '#00dddd'],
    hAxis: {
      title: 'example title',
      slantedText: false,
      slantedTextAngle: 45,
      textStyle: {
        fontSize: 10
      },
      format: 'dd-MM-yyyy'
    },
    chartArea: {
      left: 50,
      top: 20,
      width: (chartWidth - 10),
      height: (chartHeight - 90)
    }
  };
  chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
  chart.draw(data, chartOptions);
}

google.load('visualization', '1', {
  packages: ['corechart'],
  callback: drawMultipleTrendlineChart
});

<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </script>
</head>

<body>
  <div id="multipleTrendChart"></div>
</body>

</html>

谷歌可视化的多色线图

0 个答案: