Question

我使用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],
            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自定义每个点的工具提示和样式

参见以下示例......

＆＃13;

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

＆＃13;

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

＆＃13;

使用谷歌图表启用工具提示并在折线图中设置标记

1 个答案: