Javascript 谷歌图表点颜色
是否可以在Google图表api中更改点颜色,如下所示: 由此: 为此: 谢谢 试着看看asgallant创建的这个 “API中不支持在同一系列中使用不同颜色的线条和数据点。但是,您可以使用数据视图,在两列中重复数据,从而伪造您想要的内容。将第一个系列的颜色设置为“黑色”,第二个系列的颜色设置为“红色”,线宽为0,点大小>0。” 从示例中可以看出:Javascript 谷歌图表点颜色,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,是否可以在Google图表api中更改点颜色,如下所示: 由此: 为此: 谢谢 试着看看asgallant创建的这个 “API中不支持在同一系列中使用不同颜色的线条和数据点。但是,您可以使用数据视图,在两列中重复数据,从而伪造您想要的内容。将第一个系列的颜色设置为“黑色”,第二个系列的颜色设置为“红色”,线宽为0,点大小>0。” 从示例中可以看出: var options = { title: 'Load vs Length', titlePosition: '
var options = {
title: 'Load vs Length',
titlePosition: 'out',
legend: {
position: 'none'
},
hAxis: {
title: 'Length (inch)',
viewWindow: {
min: 0
},
format: '#.000'
},
vAxis: {
title: 'Load (pound)',
viewWindow: {
min: 0
}
},
series: { //Create 2 separate series to fake what you want. One for the line and one for the points
0: {
color: 'black',
lineWidth: 2
},
1: {
color: 'red',
lineWidth: 0,
pointSize: 5
}
}
谢谢你的建议。但是,系列1不适合我: 下面的代码将线打印为蓝色,但不显示点。如果我切换1和0。然后它会用红色显示点,但没有线条。在系列之前,我只得到了pointSize:4,就在hAxis之后。这是可行的,除了点和线的颜色相同
{title: 'progress',
vAxis: {
title: 'Grade',
titleTextStyle: {color: 'red'},
gridlines: {count: 7},
viewWindow: { min: 0,
max: 100,
valueLabelsInterval: 20}
},
hAxis: {
title: 'Q date',
titleTextStyle: {color: 'red'},
slantedText: true
},
series: {
0: {lineWidth: 2},
1: {
color: 'red',
lineWidth: 0,
pointSize: 4
}
}
}
我通过向每个点添加一个单独的样式列修复了此问题,如下所示:
谢谢,一个简单的点颜色会很好从谷歌,但无论如何。。。干杯,对我有用!是的,应该有一个更简单的方法,但我想他们不想给相交线带来任何混乱。很高兴有帮助!=)我们能对有多条线的图表做同样的处理吗?我们能对有多条线的图表做同样的处理吗?
var data_timeline = new google.visualization.DataTable();
data_timeline.addColumn('string', 'Year'); // Implicit domain label col.
data_timeline.addColumn('number', 'Students'); // Implicit series 1 data col.
data_timeline.addColumn({type:'string', role:'annotation'}); // annotation role col.
data_timeline.addColumn({type:'string', role:'style'}); // style col.
data_timeline.addRows([
['2010-2011', 85, '85', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
['2011-2012', 67, '67', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
['2012-2013', 34, '34', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
]);
var options_timeline = {
hAxis: { textStyle: { color: '#444444'} },
vAxis: { baselineColor: '#cccccc', textPosition: 'none', minValue: 0 },
legend: {position: 'none'},
lineWidth: 3,
pointsVisible: true,
colors: ['#b7c72a'],
};
var chart_timeline = new google.visualization.LineChart(document.getElementById('chart_timeline'));
chart_timeline.draw(data_timeline, options_timeline);