Javascript 彩色和灰色背景的海图独立系列

如何让彩色系列和灰色系列独立工作。 如果您单击fiddle示例中的单选按钮，图表的一部分将显示为灰色，其余部分显示为颜色。我想用彩色和灰色显示图例

伦敦-蓝色
伦敦-灰色

这是你的电话号码

$（函数（）{
变量grayblue='#1d'；
变量灰红色='#4C'；
数据伦敦=[48.9,38.8,39.3,41.4,47.0,48.3,59.0,59.6,52.4,65.2,59.3,51.2]；
数据柏林=[42.4,33.2,34.5,39.7,52.6,75.5,57.4,60.4,47.6,39.1,46.8,51.1]
高图（数据伦敦，数据柏林，0）；
$（'：输入[type=“radio”]”）。在（“单击”，函数（）上{
所选=12-$（this.val（）；
tempLondon=[]；
tempBerlin=[]；
用于（伦敦数据中心的var i）{
布隆登={}；
bBerlin={}；
如果（i>=选中）{
布隆登['y']=dataLondon[i]；
布隆登['color']=灰蓝色；
坦普尔顿推（布隆登）；
}否则{
推送（数据伦敦[i]）；
}                
}
for（数据柏林中的变量i）{
布隆登={}；
bBerlin={}；
如果（i>=选中）{
贝林['y']=dataBerlin[i]；
bBerlin['color']=灰红色；
推（贝林）；
}否则{
tempBerlin.push（dataBerlin[i]）；
}                
}
海图（tempLondon，tempBerlin，精选）；
});
功能高度图表（数据伦敦、数据柏林、数字）{
$（“#容器”）。高图({
图表：{
类型：“列”
},
标题：{
文字：“月平均降雨量”
},
副标题:{
文本：'来源：WorldClimate.com'
},
xAxis：{
类别：[
“一月”，
二月,，
“三月”，
“四月”，
“五月”，
"六月",，
七月,，
"八月",，
"九月",，
“十月”，
十一月,，
“十二月”
],
绘图带：[{颜色：'#ADADAD'，
从-0.5开始，
收件人：数字-0.5
}]
},
亚克斯：{
分:0,，
标题：{
文字：“降雨量（毫米）”
}
},
工具提示：{
headerFormat:“{point.key}”，
pointFormat:“{series.name}:”+
“{point.y:.1f}mm”，
页脚格式：“”，
分享：是的，
useHTML:true
},
颜色：['#0000FF'，'#FF0000']，
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
系列：[{
名称：“伦敦”，
资料来源：伦敦数据中心
}, {
名称：“柏林”，
资料来源：dataBerlin
}]
});
}
});

那么您想要4个图例元素？伦敦灰、伦敦蓝、柏林灰、柏林红？@Ondkloss是的，我试图在现有系列的基础上再添加两个系列的确，您应该在图表中添加更多系列，这对您来说很简单：-注意，我正在使用

堆叠：“normal”

，在同一位置显示两个系列。我们可以使用它，因为数据是正确地脱节的。

$(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

        }]
    });
    }
});