Google表格烛台图表修改高低线宽?

时间:2015-03-19 02:52:26

标签: javascript css google-apps-script google-visualization candlestick-chart

我一直在使用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,
    },

可悲的是,它不起作用。希望你们有一些想法。国王问候!!

0 个答案:

没有答案