大佬教程收集整理的这篇文章主要介绍了如何用谷歌图表蜡烛棒改变垂直线的颜色？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想更改烛台图表的颜色。
当设置了 fallingcolor.fill 和 risingcolor.fill 时，垂直线颜色保持与图像一样的蓝色。
这是我写的代码。
<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([
['Mon',20,28,38,45],['Tue',31,55,66],['Wed',50,77,80],['Thu',66,50],['Fri',68,22,15]
// Treat first row as data as well.
],truE);
var options = {
legend:'none',candlestick: {
fallingcolor: { strokeWIDth: 0,fill: '#a52714' },// red
risingcolor: { strokeWIDth: 0,fill: '#0f9d58' },// green
},};
var chart = new Google.visualization.CandlestickChart(document.getElementByID('chart_div'));
chart.draw(data,options);
}
</script>
</head>
https://jsfiddle.net/fe26/t6b57vnL/7/
如何更改线条的颜色？
您可以使用 colors 选项，一个颜色字符串数组。
数组中的每种颜色都应用于数据表中的每个系列。
在发布的示例中，只有一个系列，因此只需要/允许一种颜色。
colors 选项将更改所有图表元素的颜色。
但是，fallingColor 和 risingColor 选项将覆盖 colors 选项。
仅保留与 colors 选项颜色相同的垂直线。
请参阅以下工作片段...
google.charts.load('current',{
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Mon',20,28,38,45],['Tue',31,55,66],['Wed',50,77,80],['Thu',66,50],['Fri',68,22,15]
],truE);
var options = {
legend:'none',candlestick: {
fallingColor: { strokeWidth: 0,fill: '#a52714' },// red
risingColor: { strokeWidth: 0,fill: '#0f9d58' },// green
},colors: ['magenta']
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data,options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
你也可以style column role。
样式角色作为附加列添加到数据表中。
将列的值设置为要为每一行显示的颜色/样式。
如果样式值为null，则默认返回上述场景。
但是，如果它不是 null，它将覆盖上述场景中的两个选项。
注意：您需要提供列标题才能使用样式角色。
var data = google.visualization.arrayToDataTable([
['x','low','open','close','high',{role: 'style',type: 'String'}],['Mon',45,'lime'],'purple'],80,null],15,'orange']
]);
请参阅以下工作片段...
另一种选择是使用 css，并覆盖垂直线的 svg 元素，
使用 <rect> 元素绘制，带有 --> width="2"
但我会把它作为最后的手段。
#chart_div rect[width="2"] {
fill: #000000;
stroke: #000000;
}
请参阅以下工作片段...
您还可以监听图表的 'ready' 事件，
并使用您自己的脚本手动更改图表的 svg 元素。
但不推荐这样做...
以上是大佬教程为你收集整理的如何用谷歌图表蜡烛棒改变垂直线的颜色？全部内容，希望文章能够帮你解决如何用谷歌图表蜡烛棒改变垂直线的颜色？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。