3

我正在为我的项目使用谷歌折线图。我需要根据值操作折线图上的点。例如，如果值小于 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>

请帮我解决这个问题。

4

1 回答 1

3

您不能使用当前的 Google Visualization API 单独为点着色。任何着色都必须使用单独的系列进行。

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

折线图示例

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

<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>

基本上，您需要做的是：

  1. 创建 3 个不同的系列
    • 一个用于线（未显示点）
    • 一个用于积分 <170（颜色 1）
    • 一个用于点 >=170（颜色 2）
  2. 将所有数据值添加到系列 1（所以有一条实线）
  3. 将 <170 的点添加到系列 2，所有其他值为null
  4. 将 >=170 的点添加到系列 3，所有其他值为null

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

于 2013-06-10T23:32:23.730 回答