启用工具提示，并使用Google图表在折线图中设置标记 [英] Enable tooltip and set markers in line charts using google charts

问题描述

我使用Google图表创建了一个图表。我附上了同样的小提琴。

我想要工具提示格式为（r1 = 12％，r2 = 5％）... 而不是如图所示。另外，我想在开始和结束点的2种不同颜色的标记。是否可能与谷歌图表？我尝试了很多，但不能做到某种程度。任何人都可以帮忙？

 < 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]，
网格线：{
 color：'none'
}，
 title：'x'，
网格线：{
 color：'transparent'
} ，
 vAxis：{
 ticks：[0，3，6，9，12]，
 title：'y'，
网格线：{
 color：'灰色'，
 dataOpacity：0.03 
}，
}，
颜色：['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'，{
'package'：['corechart'] 
}）; 
 google.charts.setOnLoadCallback（drawChart）; 
 
 test（）; 
  

https://jsfiddle.net/tes6nze9/

解决方案

不确定我是否完全按照，但...

您可以使用

请参阅以下示例...

p>

  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）+'％'+'\\\
r2 ='+ 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：透明}，}，vAxis：{ticks：[0,3,6,9,12]，title：'y'，网格线：{color：'gray'，dataOpacity：0.03} 'none'}，width：380，height：270，tooltip：{isHtml：false}，pointSize：1}）; package：['corechart']}）;  

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

b

I have created a graph using Google charts. I have attached the fiddle of the same.

I want the tooltip format to be something like (r1=12% ,r2=5%)... and not as shown in the graph. Also I want markers of 2 different colors at the starting and end point. Is it possible with google charts? I tried a lot but couldn't do it somehow. Can anyone help?

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

解决方案

not sure I follow exactly, but...

you can use Column Roles to customize the Tooltip and Style of each point

see following example...

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>

这篇关于启用工具提示，并使用Google图表在折线图中设置标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！