我想要一个谷歌线图,其中一个线系列是虚线。
使用谷歌jsapi(javascript)可以实现吗?
实际上,我计划使用ComboChart,其中AreaChart用于大部分数据,但有一个系列使用LineChart。我希望该线条为虚线...
我想要一个谷歌线图,其中一个线系列是虚线。
使用谷歌jsapi(javascript)可以实现吗?
实际上,我计划使用ComboChart,其中AreaChart用于大部分数据,但有一个系列使用LineChart。我希望该线条为虚线...
是的,你可以。只需在文档中阅读数据表角色相关内容即可。
你所绘制的每个点都可以确定(确实性:true)或不确定(确实性:false)。在两点之间,如果一个或两个点不确定,则它们之间的线将是虚线。
你只需要像这样做:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, true],
['May', 1170, true],
['June', 660, true],
['July', 1030, false]
]);
var chartLineWithDash = new google.visualization.LineChart(yourDiv);
chartLineWithDash .draw(data);
六月和七月之间的线条将是虚线。
目前它的样式是“实验性的”,但请随意提问!:)希望它对您有所帮助!
var options =
{
lineWidth: 2,
series: {0: {type: 'line',lineDashStyle: [2, 2]}}
};
chartLineWithDash.draw(data, options);
示例:运行代码片段
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable
([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]',
'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]',
'lineDashStyle: [4, 1]',
'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]',
'lineDashStyle: [14, 2, 2, 7]',
'lineDashStyle: [2, 2, 20, 2, 20, 2]'],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
[3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
[4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
[5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
[6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
[7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
[8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
[9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
]);
var options = {
hAxis: { maxValue: 10 },
vAxis: { maxValue: 18 },
chartArea: { width: 380 },
lineWidth: 4,
series: {
0: { lineDashStyle: [1, 1] },
1: { lineDashStyle: [2, 2] },
2: { lineDashStyle: [4, 4] },
3: { lineDashStyle: [5, 1, 3] },
4: { lineDashStyle: [4, 1] },
5: { lineDashStyle: [10, 2] },
6: { lineDashStyle: [14, 2, 7, 2] },
7: { lineDashStyle: [14, 2, 2, 7] },
8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
},
colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
'#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>