如何在Highcharts中更改條形顏色

Question

我使用Highcharts構建圖表，看到的默認顏色是藍色。 如何將顏色更改為綠色？

我嘗試通過查看在線API http://api.highcharts.com/highcharts#colors添加顏色數組，但可能是我未將其設置在正確的位置。

Highcharts JS v4.1.9

的index.jsp

<!DOCTYPE html>
<html>
    <head>
        <title>Start Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>  
    </head>
    <body>
        <h1 align="center">Highcharts - Basic Column Chart demo!</h1>
        <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
        <script language="JavaScript">
            $(document).ready(function () {
                var chart = {
                    type: 'column'
                };
                var title = {
                    text: 'Monthly Average Rainfall'
                };
                var subtitle = {
                    text: 'Source: WorldClimate.com'
                };

                var xAxis = {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    crosshair: true
                };
                var yAxis = {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                };
                var tooltip = {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                };
                var plotOptions = {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                };
                var credits = {
                    enabled: false
                };

                var series = [{
                        name: 'Tokyo',
                        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                    }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.tooltip = tooltip;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;
                json.credits = credits;
                $('#container').highcharts(json);
            });
        </script>
    </body>
</html>

請指導。

Answer 1

API說明了一切。 創建一條綠線#009933的方法是將其添加到設置中的顏色陣列中。 colors屬性只是一個數組，而不是json對象。

jsfiddle示例

colors:['#009933']

正如文檔所述，只要您有剩余，它就會循環顯示所有顏色。

使用所有顏色時，將從頭開始重新拉出新顏色。

使用語法看起來像您的series屬性，它也只是一個數組。

var colors = ['#009933'];
json.colors = colors;

Answer 2

在這里做的另一種方法

定義顏色數組並插入json.colors

var colors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'] ;

如何在Highcharts中更改條形顏色

問題描述

2 個解決方案

解決方案1
1 已采納 2015-10-16 15:29:09

解決方案2
1 2015-10-16 15:49:38

如何在Highcharts中更改條形顏色

問題描述

2 個解決方案

解決方案1 1 已采納 2015-10-16 15:29:09

解決方案2 1 2015-10-16 15:49:38

解決方案1
1 已采納 2015-10-16 15:29:09

解決方案2
1 2015-10-16 15:49:38