Question

我使用Highcharts构建图表，我看到的默认颜色是蓝色。如何将颜色更改为绿色？

我尝试通过查看在线API http://api.highcharts.com/highcharts#colors添加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 example

colors:['#009933']

正如文档所述，只要你还剩下一些东西，它就会循环所有的颜色。

使用所有颜色时，会再次从头开始拉出新颜色。

使用你的语法看起来就像你的系列属性，它也只是一个数组。

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

Answer 2

One more way of doing it here

定义colors数组并插入json.colors

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

如何更改Highcharts中的条形颜色

2 个答案: