按月动态更改系列行的颜色

时间:2015-03-23 15:23:03

标签: javascript jquery highcharts

我有一个从1月到12月的系列,要求是将最后一个数据点更新为灰度颜色。所以我创建了额外的数据系列,为系列分配灰度颜色。我能否加入带有灰度彩色系列的彩色系列

http://jsfiddle.net/hgj7sfhp/33/

例如,伦敦彩色和伦敦灰度应该加入,就像11月之后的连续剧一样,没有任何突破。我有伦敦& 12月的柏林在图表中指出,但我想附加到彩色系列,是否可能?

还将彩色系列和灰度系列的图例分组。

伦敦,柏林

LondonGray,BerlinGray

$(function () {
    var grayblue = '#1D1D1D';
    var grayred = '#4C4C4C';

    dataLondon = [ 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 45.6, 90.4];
    dataBerlin = [ 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 23.6, 29.1]
    highcharts(dataLondon, dataBerlin, 0);


    function highcharts(dataLondon, dataBerlin, number) {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            plotBands: { color: 'Red',
                from: 10.5,
                to: 10.55,
                        label: {
                            text: 'I am label'
                        }

            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        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
        },
        colors: ['#0000FF', '#FF0000'],
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'London',
            data: dataLondon

        }, {
            name: 'Berlin',
            data: dataBerlin

        }, {
            name: 'London',
            data: [null,null,null,null,null,null,null,null,null,null,null,10],
            color: '#1D1D1D'
        }, {
            name: 'Berlin',
            data: [null,null,null,null,null,null,null,null,null,null,null, 51.1],
            color: '#4C4C4C'
        }]
    });
    }
});

0 个答案:

没有答案