Question

我是谷歌排行榜的新手，我想为板球率和门票制作一个应该看起来像这样的图表

enter image description here

我搜索了谷歌并发现我可以在注释的帮助下完成它并且我已经编写了这段代码：

<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(drawVisualization);

      function drawVisualization() {
          var data = new google.visualization.DataTable();
          data.addColumn('number', 'Overs');
          data.addColumn('number', 'Run-rate');
          data.addColumn({type: 'string', role:'annotation'});
          data.addColumn({type: 'string', role:'annotationText'});
          data.addRows([
            [1,   6, null, null],
            [2,   6, null, null],
            [10,   2, null, null],
            [20,   3.2, null, 'Shoaib Malik'],
            [21,   3, '2', 'Shahid Afridi'],
            [30,   4, null, null],
            [40,   5, 'B', 'This is Point B'],
            [50,   6, null, null],
          ]);



            var options = {
                  title: 'Run Rate',
                  pointSize:0,
                  hAxis: {
                      gridlines: {
                          color: 'transparent'
                      }
                  },
            };

          new google.visualization.LineChart(document.getElementById('chart_div')).
            draw(data, options);
        }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

这是代码的输出：

enter image description here

现在问题是我想像第一张图片而不是文字2，B那样显示圆圈我不能使用pointSize这样做，因为我想要在wicket落下的圆圈，而不是过度的地方...... 可以任意告诉我该怎么做？或者我可以用圆圈或任何其他方式替换文本

Answer 1

如果要使用注释功能，则无法替换文本（因为文本是注释生成的文本）。您可以使用重叠数据系列仅显示某些点。这是一个显示重叠系列的示例（为简单起见，我删除了注释，但如果您愿意，仍可以使用它们）：

function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Overs');
    data.addColumn('number', 'Run-rate');
    data.addColumn('boolean', 'Wicket falls');
    data.addRows([
        [1, 6, false],
        [2, 6, false],
        [10, 2, true],
        [20, 3.2, false],
        [21, 3, true],
        [30, 4, true],
        [40, 5, false],
        [50, 6, false]
    ]);

    // create a DataView that duplicates points on the "Run Rate" series where "Wicket falls" is true
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function (dt, row) {
            // return the value in column 1 when column 2 is true
            return (dt.getValue(row, 2)) ? dt.getValue(row, 1) : null;
        }
    }]);

    var options = {
        title: 'Run Rate',
        pointSize:0,
        hAxis: {
            gridlines: {
                color: 'transparent'
            }
        },
        series: {
            0: {
                // put any options pertaining to series 0 ("Run-rate") here
            },
            1: {
                // put any options pertaining to series 1 ("Wicket Falls") here
                pointSize: 6,
                lineWidth: 0
            }
        }
    };

    new google.visualization.LineChart(document.getElementById('chart_div')).
    // use the view instead of the DataTable to draw the chart
    draw(view, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});

请参阅此处的工作示例：http://jsfiddle.net/asgallant/saTWj/

Google Line Charts，在注释上放置圆圈

1 个答案: