Google visualization 谷歌折线图，将圆放在注释上_Google Visualization

Google visualization 谷歌折线图，将圆放在注释上

google-visualization

Google visualization 谷歌折线图，将圆放在注释上,google-visualization,Google Visualization,我是谷歌图表的新手，我想做一个板球率和边门率的图表，应该是这样的我搜索过谷歌，发现我可能会借助注释来完成这项工作，我编写了以下代码： <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("

我是谷歌图表的新手，我想做一个板球率和边门率的图表，应该是这样的

我搜索过谷歌，发现我可能会借助注释来完成这项工作，我编写了以下代码：

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


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawVisualization）；
函数drawVisualization（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'Overs'）；
data.addColumn（'number'，'Run rate'）；
addColumn（{type:'string'，role:'annotation'}）；
addColumn（{type:'string'，role:'annotationText'}）；
data.addRows([
[1,6，null，null]，
[2,6，null，null]，
[10,2,null，null]，
[20,3.2，空，'Shoaib Malik']，
[21,3,2,Shahid Afridi']，
[30,4,null，null]，
[40,5，'B'，'这是点B']，
[50,6,null，null]，
]);
变量选项={
标题：“运行速度”，
点大小：0，
哈克斯：{
网格线：{
颜色：“透明”
}
},
};
新的google.visualization.LineChart（document.getElementById（'chart\u div'））。
绘制（数据、选项）；
}

这是代码的输出：

现在的问题是，我想像第一幅图像一样显示圆形，而不是文本2，B 我不能用点大小来做，因为我想要的是小门落下的圆，而不是边沿的圆。。。

有人能告诉我怎么做吗？我可以用圆圈或任何其他方式替换文本

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

请参见此处的工作示例：

非常感谢您救了我的命：p您还可以告诉我如何使用类型字符串更改工具提示文本吗？有关自定义工具提示内容的文档位于此处：。

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});