谷歌折線圖上標註

地方圈我是新來的谷歌圖表我想打板球率率和檢票口的圖形應該是這個樣子谷歌折線圖上標註

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

谷歌折線圖上標註

回答

相關問題