我正在为我的项目使用 Google 折线图。我需要根据值来操作折线图上的点。例如，如果该值小于 170，那么它会在折线图上显示默认点，如果它大于 170，它应该在折线图上显示不同的点。我应该如何为一个系列的折线图中的点放置不同的颜色？这是我的代码:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Record'],
['4/1', 165],
['4/2', 160],
['4/3', 163],
['4/4', 173]
]);
var options = {
title: 'Line Chart', pointSize : 5 };
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>`enter code here`
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
请帮我解决这个问题。
最佳答案
您不能使用当前的 Google Visualization API 单独为点着色。任何着色都必须使用单独的系列完成。
在您的情况下，您可以通过解决方法获得预期的结果。这是我认为您想要的:
这段代码应该给你你想要的结果:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Line');
data.addColumn('number', 'Under 170');
data.addColumn('number', 'Over 170');
data.addRows([
['4/1', 165, 165, null],
['4/2', 160, 160, null],
['4/3', 163, 163, null],
['4/4', 173, null, 173]
]);
var options = {
title: 'Line Chart',
pointSize : 5,
series: [{color: 'black', pointSize: 0}, {color: 'red', lineWidth: 0}, {color: 'blue', lineWidth: 0}]
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>`enter code here`
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
基本上，您需要做的是:
- 创建 3 个不同的系列
- 一条线(未显示点)
- 一个点 <170(颜色 1)
- 一个点 >=170(颜色 2)
- 将所有数据值添加到系列 1(因此有一条实线)
- 将 <170 的点添加到系列 2，所有其他值为
null - 将 >=170 的点添加到系列 3，所有其他值为
null
然后您可以使用 series 选项来格式化图表。第一个系列将确定线条颜色。第二个系列将确定点 <170 的颜色。第三个系列将确定点 >=170 的颜色。
关于google-visualization - 基于系列值的谷歌折线图点操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17033608/