Question

我正在为我的项目使用Google Line Chart。我需要根据值操纵折线图上的点。例如，如果该值小于170，则表示线图上的默认点，如果大于170，则应在折线图上显示不同的点。我应该如何为一个系列的折线图中的点添加不同的颜色？这是我的代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Record'],
          ['4/1',  165],
          ['4/2',  160],
          ['4/3',  163],
          ['4/4',  173]
        ]);

        var options = {
          title: 'Line Chart', pointSize : 5 };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>`enter code here`
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

请帮助我。

Answer 1

您无法使用当前的Google Visualization API单独对点进行着色。任何着色必须使用单独的系列。

在您的情况下，您可以通过变通方法获得所需的结果。这就是我想你想要的：

Line Chart Sample

此代码应该为您提供所需的结果：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Line');
        data.addColumn('number', 'Under 170');
        data.addColumn('number', 'Over 170');
        data.addRows([
          ['4/1',  165, 165, null],
          ['4/2',  160, 160, null],
          ['4/3',  163, 163, null],
          ['4/4',  173, null, 173]
        ]);

        var options = {
          title: 'Line Chart',
          pointSize : 5,
          series: [{color: 'black', pointSize: 0}, {color: 'red', lineWidth: 0}, {color: 'blue', lineWidth: 0}]
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>`enter code here`
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

基本上，你要做的是：

创建3个不同的系列
- 一条线（没有显示点）
- 一个用于点＆lt; 170（颜色1）
- 一个点> = 170（颜色2）
将所有数据值添加到系列1（因此有一条实线）
向系列2添加点数＆lt; 170，其他所有值为null
向系列3添加点> = 170，其他所有值为null

然后，您可以使用series选项格式化图表。第一个系列将确定线条颜色。第二个系列将确定点的颜色<170。第三个系列将确定点的颜色> = 170。

基于系列值的谷歌折线图点操纵

1 个答案: