Google 图表 - 动态旋转线点
Google Charts - Dynamically rotate line points
可以使用 Google 图表 (https://developers.google.com/chart/interactive/docs/points#rotations). It's also possible to customize individual points (https://developers.google.com/chart/interactive/docs/points#individual) 旋转折线图点。
我想根据传递给 table 的数据旋转点。以下代码加载自定义点但不旋转三角形。这可能吗?
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/
谢谢
在各个点选项中,旋转选项似乎被称为 shape-rotation
,而不仅仅是 rotation
。
将您的 rotation: 180
更改为 shape-rotation: 180
,它应该可以工作。
可以使用 Google 图表 (https://developers.google.com/chart/interactive/docs/points#rotations). It's also possible to customize individual points (https://developers.google.com/chart/interactive/docs/points#individual) 旋转折线图点。
我想根据传递给 table 的数据旋转点。以下代码加载自定义点但不旋转三角形。这可能吗?
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/
谢谢
在各个点选项中,旋转选项似乎被称为 shape-rotation
,而不仅仅是 rotation
。
将您的 rotation: 180
更改为 shape-rotation: 180
,它应该可以工作。