我一直在使用Google的烛台图表并根据我的需要定制所有内容,除了烛台上方和下方的线条宽度无法修改,或者我只是没有找到方法。我的代码如下所示:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, {
selectionMode: 'multiple',
backgroundColor: {
strokeWidth: 3,
stroke: 'black',
},
vAxis: {
gridlines: {
count: -1,
},
minorGridlines: {
count: 4,
}
},
hAxis: {
textStyle: {
color: 'white',
}
},
focusTarget: 'category',
colors: ['black', 'black'],
legend: 'none',
theme: 'maximized',
candlestick: {
hollowIsRising: 'false',
risingColor: {
fill: 'green',
stroke: 'black',
strokeWidth: 1, // Here you can clearly see that I changed the candlestick's stroke to a smaller value which would basically be the same as decreasing the "border width".
},
fallingColor: {
fill: 'red',
stroke: 'black',
strokeWidth: 1, // Here you can clearly see that I changed the candlestick's stroke to a smaller value which would basically be the same as decreasing the "border width".
}
}
});
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
这完全没问题,然而,上面和下面出现的线条可能更大&#34;或者在造型方面&#34; fat&#34;它不与烛台的 strokeWidth 结合使用。造型看起来很丑陋,过渡也不太合适。有没有办法将这些线设置为与烛台 strokeWidth 相同的大小?我尝试过以下代码:
bar: {
strokeWidth: 1,
},
可悲的是,它不起作用。希望你们有一些想法。国王问候!!