独立系列为highcharts与颜色和灰色背景

时间:2015-03-17 21:59:22

标签: javascript jquery highcharts

如何使系列颜色和灰色系列独立工作。 如果单击小提琴示例中的单选按钮,则图表的一部分将显示为灰色,其余部分为颜色。我想用彩色和灰色显示图例。

London - blue London - gray

以下是jsfiddle

$(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, 65.2, 59.3, 51.2];
    dataBerlin = [ 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    highcharts(dataLondon, dataBerlin, 0);

    $(':input[type="radio"]').on("click", function() {
         selected = 12 - $(this).val();           
            tempLondon = [];
            tempBerlin = [];
            for(var i in dataLondon) {
                bLondon = {};
                bBerlin = {};
                if(i >= selected) {
                   bLondon['y'] = dataLondon[i];
                   bLondon['color'] = grayblue;
                   tempLondon.push(bLondon); 
                } else {
                   tempLondon.push(dataLondon[i]);
                }                
            }
             for(var i in dataBerlin) {
                bLondon = {};
                bBerlin = {};
                if(i >= selected) {
                   bBerlin['y'] = dataBerlin[i];
                   bBerlin['color'] = grayred;
                  tempBerlin.push(bBerlin); 
                } else {
                   tempBerlin.push(dataBerlin[i]);
                }                
            }

        highcharts(tempLondon, tempBerlin, selected);
    });
    function highcharts(dataLondon, dataBerlin, number) {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        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: '#ADADAD',
                from: -0.5,
                to: number - 0.5
            }]
        },
        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

        }]
    });
    }
});

0 个答案:

没有答案