highcharts - 您可以在旭日形图中显示/隐藏系列吗?
问题描述
您可以像在 x 范围图表中使用系列一样,使用带有旭日形图表的可选系列吗?在 x 范围图表中,可以选择/取消选择(显示/隐藏)系列。你能在旭日形图中做类似的事情吗?以某种方式对数据点进行分组?
x-range 图表中显示/隐藏系列的示例:http: //jsfiddle.net/02Lqotd7/
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
},{
name: 'Project 2',
// pointPadding: 0,
// groupPadding: 0,
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
}]
});
解决方案
首先,sunburst
图表类型只有一个系列,因此要隐藏/显示图表的部分,您需要隐藏/显示点。但是,默认情况下不支持此功能,需要进行一些自定义。
最简单的解决方案是使用系列类型和内部选项的setVisible
方法。接下来,隐藏事件中不必要的图例项。pie
legendType: 'point'
afterGetAllItems
var H = Highcharts;
H.seriesTypes.sunburst.prototype.pointClass.prototype.setVisible = H.seriesTypes.pie.prototype.pointClass.prototype.setVisible
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems.splice(1, 1);
e.allItems.splice(2, 1);
});
最后它仍然处理点legendItemClick
事件 - 您可以使用点update
方法来设置value: null
隐藏点:
point: {
events: {
legendItemClick: function() {
this.series.points.forEach(function(el) {
if (el.color === this.color) {
el.update({
oldValue: el.value ? el.value : el.oldValue,
value: el.value ? null : el.oldValue
}, false);
}
}, this);
this.series.chart.redraw();
}
}
}
现场演示:http: //jsfiddle.net/BlackLabel/8cLp17of/
API:https ://api.highcharts.com/class-reference/Highcharts.Point#update
推荐阅读
- microsoft-edge - 向 Microsoft Edge 附加组件网站提交扩展时,如何提供任何其他详细信息以进行认证审核?
- c# - 如何单击元素c#的中心?
- codeblocks - 是否可以在 CodeBlocks 中设置工作区级编译器标志?
- node.js - 从 Marketplace 安装时,VSCode 扩展找不到模块
- javascript - 在Javascript中使用数组数据制作表格
- python - 即使您不提交任何内容,“MultipleFileField”也总是返回 True,为什么?
- scala - 映射表列类型转换应用取消应用
- rust - 当 try_next 还没有任何项目时,流会阻塞线程
- php - 我正在尝试在 mod_rewrite 中模拟 else
- javascript - 来自 json 文件的 Swagger 示例帖子正文引用