造型Highcharts.js类别标题问题

时间:2014-07-03 21:22:09

标签: javascript highcharts

您能告诉我如何在this demo更新Highcharts.js类别标题样式吗?所以类别标题和yAxis在相同颜色上相同

我已经尝试添加样式

   categories: ['Powerlines', 'Roads'],
   style: {
    color:  Highcharts.getOptions().colors[0]
           },

但它没有用

  

更新

enter image description here

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/2GH45/6/ colors[1]代表蓝色colors[0]代表蓝色

     $(function () {

    $('#chart2').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'The Chart Title Goes Here!',
            style: {
                color: '#5882FA',
                fontWeight: 'normal',
                fontSize: '11',
                marginBottom: '30'
            }
        },

        xAxis: {
            categories: ['Roads', 'Powerlines'],
          //you can configure xAxis labels here:
            labels: {


                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }

        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return this.x +
                    ' is <b>' + this.y + '</b>';
            }
        },

        /*series: [{
            data: [{
                name: 'Roads',

                y: 200
            }, {
                name: 'Powerlines',
                color: '#FF00FF',
                y: 50
            }]
        }]*/
        series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            type: 'column',
            data: [7.0, 6.9],
            tooltip: {
                valueSuffix: ' °C'
            }
        }]
    });


});