Google Charts - 动态旋转线点

时间:2015-04-17 20:38:20

标签: javascript google-chartwrapper

可以使用Google Charts(https://developers.google.com/chart/interactive/docs/points#rotations)旋转折线图点。也可以自定义各个点(https://developers.google.com/chart/interactive/docs/points#individual)。

我想根据传递给表的数据来旋转点。以下代码加载自定义点但不旋转三角形。这甚至可能吗?

google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable
        ([['X', 'Y', {'type': 'string', 'role': 'style'}],
          [1, 3, null],
          [2, 2.5, null],
          [6, 3, 'point {shape-type: triangle;  rotation: 180;}'],
          [7, 2.5, null],
          [8, 3, null]
    ]);

    var options = {
      legend: 'none',
      hAxis: { minValue: 0, maxValue: 9 },
      curveType: 'function',
      pointSize: 7
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

在jsfiddle中 - https://jsfiddle.net/7bc691kr/

由于

1 个答案:

答案 0 :(得分:1)

在单个点选项中,看起来旋转选项名为shape-rotation,而不仅仅是rotation

将您的rotation: 180更改为shape-rotation: 180,它应该有效。