Highmaps 多个系列不禁用一个就看不到
Highmaps mulitple series can't seen without disable one
我有 2 个系列,如下所示。
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tr/tr-all.js"></script>
<div id="container"></div>
$(function () {
Highcharts.mapChart('container', {
chart: {
spacingBottom: 20
},
title: {
text: 'Multiple Map Series'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: true,
// joinBy: 'code',
mapData: Highcharts.maps['countries/tr/tr-all'],
tooltip: {
headerFormat: '',
pointFormat: '{series.name}-{point.name}: <b>{point.value}</b>'
}
}
},
series: [{
name: 'AAA',
data: $.map(['tr-an','tr-iz'], function (code) {
return { "hc-key": code , value : 150};
})
},
{
name: 'BBB',
data: $.map(['tr-ib','tr-or'], function (code) {
return { "hc-key": code , value : 122};
})
}
]
});
});
jsfiddle 来了; http://jsfiddle.net/usrt1Lrr/5/
first serie(AAA) 包含 2 个城市 'tr-an' 和 'tr-iz'。
second serie(BBB) 包含 2 个城市 'tr-ib' 和 'tr-or'。
除非我通过图例禁用一个系列,否则无法看到 2 个系列。如果禁用 BBB 系列; AAA 将可见。这毫无意义。
我该如何解决这个问题?全系列必看
提前致谢。
因为你有 plotOptions.map.allAreas: true
它绘制了两个系列的所有区域,这意味着系列绘制在彼此之上(隐藏下面系列的颜色)。
另一种方法是让您选择:
plotOptions: {
map: {
allAreas: false,
// ...
}
}
并添加一个隐藏的 "background" 系列,如下所示:
series: [{
allAreas: true, // only show all areas for this series (as a "background")
showInLegend: false // hide it from the legend
},
{
name: 'AAA',
data: $.map(['tr-an','tr-iz'], function (code) {
return { "hc-key": code , value : 150};
})
},
{
name: 'BBB',
data: $.map(['tr-ib','tr-or'], function (code) {
return { "hc-key": code , value : 122};
})
}]
查看 this JSFiddle demonstration 的实际效果。
我有 2 个系列,如下所示。
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tr/tr-all.js"></script>
<div id="container"></div>
$(function () {
Highcharts.mapChart('container', {
chart: {
spacingBottom: 20
},
title: {
text: 'Multiple Map Series'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: true,
// joinBy: 'code',
mapData: Highcharts.maps['countries/tr/tr-all'],
tooltip: {
headerFormat: '',
pointFormat: '{series.name}-{point.name}: <b>{point.value}</b>'
}
}
},
series: [{
name: 'AAA',
data: $.map(['tr-an','tr-iz'], function (code) {
return { "hc-key": code , value : 150};
})
},
{
name: 'BBB',
data: $.map(['tr-ib','tr-or'], function (code) {
return { "hc-key": code , value : 122};
})
}
]
});
});
jsfiddle 来了; http://jsfiddle.net/usrt1Lrr/5/
first serie(AAA) 包含 2 个城市 'tr-an' 和 'tr-iz'。
second serie(BBB) 包含 2 个城市 'tr-ib' 和 'tr-or'。
除非我通过图例禁用一个系列,否则无法看到 2 个系列。如果禁用 BBB 系列; AAA 将可见。这毫无意义。
我该如何解决这个问题?全系列必看
提前致谢。
因为你有 plotOptions.map.allAreas: true
它绘制了两个系列的所有区域,这意味着系列绘制在彼此之上(隐藏下面系列的颜色)。
另一种方法是让您选择:
plotOptions: {
map: {
allAreas: false,
// ...
}
}
并添加一个隐藏的 "background" 系列,如下所示:
series: [{
allAreas: true, // only show all areas for this series (as a "background")
showInLegend: false // hide it from the legend
},
{
name: 'AAA',
data: $.map(['tr-an','tr-iz'], function (code) {
return { "hc-key": code , value : 150};
})
},
{
name: 'BBB',
data: $.map(['tr-ib','tr-or'], function (code) {
return { "hc-key": code , value : 122};
})
}]
查看 this JSFiddle demonstration 的实际效果。