Googleのグラフを使用してツールチップを有効にし、折れ線グラフでマーカーを設定

Question

私はGoogleのグラフを使ってグラフを作成しました。私は同じもののバイブルを付けました。

ツールチップ形式を(r1=12% ,r2=5%)...のようにし、グラフに示されていないようにします。また、開始点と終了点に2色のマーカーが必要です。 Googleのチャートで可能ですか？私はたくさん試しましたが、なんとかできませんでした。誰も助けることができますか？

<div id="chart"></div> 

function test() { 
    for (i = 0; i <= 90; i++) { 
     var r1; 
     var r2; 

     r1 = i * 0.1 + (10 - i) * 0.05; 
     r2 = (10 - i) * (10 - i) * 0.15 * 0.15; 
     a.push([Math.sqrt(r2), r1]); 
    } 
} 
var a = [["r1", "r2"]]; 

function drawChart() { 
    var data = google.visualization.arrayToDataTable(a); 
    var options = { 
     isStacked: true, 
     hAxis: { 
      ticks: [0, 5, 10, 15, 20], 
      gridlines: { 
       color: 'none' 
      }, 
      title: 'x', 
      gridlines: { 
       color: 'transparent' 
      }, 
     }, 
     vAxis: { 
      ticks: [0, 3, 6, 9, 12], 
      title: 'y', 
      gridlines: { 
       color: 'gray', 
       dataOpacity: 0.03 
      }, 
     }, 
     colors: ['green'], 
     legend: { 
      position: 'none' 
     }, 
     width: 380, 
     height: 270, 
     tooltip: { 
      isHtml: false 
     } 
    }; 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
    chart.draw(data, options); 
} 
google.charts.load('current', { 
    'packages': ['corechart'] 
}); 
google.charts.setOnLoadCallback(drawChart); 

test(); 

https://jsfiddle.net/tes6nze9/

Answer 1

ない私はあなたが

は、以下を参照してください各点のツールチップとスタイルをカスタマイズするColumn Rolesを使用することができます正確、しかし...

に従ってください例...

var a = [[ 
 
    "r1", 
 
    "r2", 
 
    {role: 'tooltip', type: 'string'}, 
 
    {role: 'style', type: 'string'} 
 
]]; 
 

 
function test(){ 
 
    for (i = 0; i<= 90; i++) { 
 
    var r1; 
 
    var r2; 
 
    var tooltip; 
 
    var style; 
 

 
    r1 = i* 0.1 + (10 - i) *0.05; 
 
    r2 = (10- i) * (10 - i) *0.15 *0.15; 
 

 
    tooltip = 'r1=' + r1.toFixed(1) + '%' + '\nr2=' + r2.toFixed(1) + '%'; 
 

 
    if (i <= 0) { 
 
     style = 'color: cyan; stroke-width: 5;'; 
 
    } else if (i >= 90) { 
 
     style = 'color: magenta; stroke-width: 5;'; 
 
    } else { 
 
     style = 'color: green;'; 
 
    } 
 

 
    a.push([ 
 
     Math.sqrt(r2), 
 
     r1, 
 
     tooltip, 
 
     style 
 
    ]); 
 
    } 
 
} 
 

 
google.charts.load('current', { 
 
    callback: function() { 
 
    test(); 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(google.visualization.arrayToDataTable(a), { 
 
     isStacked: true, 
 
     hAxis: { 
 
     ticks: [0,5,10,15,20], 
 
     gridlines: { 
 
      color: 'none' 
 
     }, 
 
     title: 'x', 
 
     gridlines: { 
 
      color: 'transparent' 
 
     }, 
 
     }, 
 
     vAxis: { 
 
     ticks: [0,3,6,9,12], 
 
     title: 'y', 
 
     gridlines: { 
 
      color: 'gray', 
 
      dataOpacity: 0.03 
 
     }, 
 
     }, 
 
     legend: {position: 'none'}, 
 
     width: 380, 
 
     height: 270, 
 
     tooltip: {isHtml: false}, 
 
     pointSize: 1 
 
    }); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>