Charts 谷歌折线图的虚线

我想要一张谷歌折线图，上面有一条虚线

使用GoogleJSAPI（javascript）可以做到这一点吗

实际上，我计划使用组合图，其中大部分数据使用面积图，但有一个系列使用折线图。我希望那条线是一条虚线…

是的，你可以。 只要看一下医生的报告就行了

你画的每一点都可能是确定的（确定性：真）或不确定的（确定性：假）。在两个点之间，如果其中一个点或两个点不确定，则两个点之间的线将为虚线

你只需要这样做：

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);

示例：运行代码段

load（“当前”{packages:[“corechart”]}）；
google.charts.setOnLoadCallback（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]
]);
变量选项={
hAxis:{maxValue:10}，
变量：{maxValue:18}，
图表区：{宽度：380}，
线宽：4，
系列：{
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]}
},
颜色：[“e2431e”、“f1ca3a”、“6f9654”、“1c91c0”，
"4374e0","5c3292","572a1a","99999","1a1a1a",，
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

您是否已经了解了这一点？它也适用于数据视图。如上所述设置“data”变量，然后可以执行var view=new google.visualization.DataView（data）。之后，在调用view.setColumns（）时，请确保为添加的确定性列包含新的列索引。