在chart.js中组合多个图例元素
Posted
技术标签:
【中文标题】在chart.js中组合多个图例元素【英文标题】:Combining multiple legend elements in chart.js 【发布时间】:2020-04-06 21:39:54 【问题描述】:我正在尝试将置信区间添加到 chart.js 中的时间序列图中。目前我绘制了三个数据集并使用了填充选项。这意味着我最终在图例中得到了 3 个元素,所有这些元素都可以独立切换(图 1)。
我想要做的是将三个图例元素组合成一个对象,该对象将一次切换所有三个数据集例如,如图 2 中的模型。[或者替代结构我的数据这样一个数据集绘制所有三行]。
编辑:这是我目前如何实现情节的最小工作示例 - https://jsfiddle.net/r491ge8z/7/
在这个例子中,我想要一个可以切换所有三个数据集的图例元素。
var chartData =
labels: [1, 2, 3, 4, 5],
datasets: [
label: "Set 1",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
data: [8, 18, 48, 38, 28],
borderWidth: 0.1,
fill: false,
pointRadius: 0.0,
,
label: "Set 1",
backgroundColor: 'rgba(55, 173, 221, 1)',
data: [10, 20, 50, 40, 30],
borderColor: "#00F",
fill: false,
pointRadius: 0.0,
,
label: "Set 1",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
data: [12, 22, 52, 42, 32],
borderWidth: 0.1,
fill: '-2',
pointRadius: 0.0,
,
]
;
var chartOptions =
responsive: true,
title:
display: true,
text: 'Bad Confidence Intervals'
,
;
var chartDemo = new Chart($('#demo').get(0),
type: 'line',
data: chartData,
options: chartOptions
);
【问题讨论】:
是什么阻止了你从你拥有的数据集中制作两个数据集。 我不确定你的意思 - 我已经添加了代码来展示我目前是如何实现情节的。 而不是像它们分开一样思考它......合并它们......也就是将它们加在一起并将它们视为一组新数据,即组合的数据。 好的,我知道你想达到什么目的......谷歌搜索 【参考方案1】:我通过在图表选项中添加以下内容来了解如何做到这一点 -
[假设您的置信区间命名为xxx_lo
、xxx
、xxx_hi
,并按此顺序出现在chartData
]
jsfiddle 示例 - https://jsfiddle.net/5fktnv6a/
labels:
filter: function(item, chart)
return !item.text.includes('_');
,
onClick: function(e, legendItem) // need to hide index -1 and index +1
let index = legendItem.datasetIndex;
let ci = this.chart;
let alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false : ci.getDatasetMeta(index).hidden;
let meta_lo = ci.getDatasetMeta(index - 1);
let meta = ci.getDatasetMeta(index);
let meta_hi = ci.getDatasetMeta(index + 1);
if (!alreadyHidden)
meta_lo.hidden = true;
meta.hidden = true;
meta_hi.hidden = true;
else
meta_lo.hidden = null;
meta.hidden = null;
meta_hi.hidden = null;
ci.update();
,
【讨论】:
以上是关于在chart.js中组合多个图例元素的主要内容,如果未能解决你的问题,请参考以下文章