谷歌折线图上标注

地方圈我是新来的谷歌图表我想打板球率率和检票口的图形应该是这个样子谷歌折线图上标注

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因为我想圆哪里检票口瀑布，不要在那里过结束... 任何一个可以告诉我如何做到这一点？或者我可以用圆圈或其他方式替换文字

来源

2013-11-25 Wasif Khalil

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

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/

来源

2013-11-25 15:03:50 asgallant

谢谢你这么多ü保存我的生活：P –

你也可以告诉我如何改变类型字符串的工具提示文本？ –

有关自定义工具提示内容的文档位于：https：//developers.google.com/chart/interactive/docs/customizing_tooltip_content。 – asgallant

谷歌折线图上标注

回答

相关问题