我有一个关于过滤/子集化我的数据集的问题。我正在通过利用isDatasetVisible
和setDatasetVisibility
创建一个自定义图例函数,但我想知道我的函数是否也可以子集化x轴?
现在的函数是这样的,但它的工作方式与默认图例行为类似
function updateLegend(click, output) {
const element = click.target.parentNode;
element.classList.toggle('fade');
output.update();
}
function generateLegend(output, container) {
if (document.querySelectorAll('.customLegend').length === 0) {
const chartBox = document.querySelector(container);
const div = document.createElement('DIV');
div.setAttribute('class', 'customLegend');
const ul = document.createElement('UL');
output.legend.legendItems.forEach((dataset, index) => {
const text = dataset.text;
const stroke = dataset.strokeStyle;
const fill = dataset.fillStyle;
const fontColor = '#666';
const dat = dataset.data;
const li = document.createElement('LI');
const spanBox = document.createElement('SPAN');
spanBox.style.borderColor = stroke;
if (fill == 'rgba(0,0,0,0.1)') {
spanBox.setAttribute('class', 'legend-annotation');
} else {
spanBox.setAttribute('class', 'legend-content');
spanBox.style.backgroundColor = fill;
}
const p = document.createElement('P');
const textNode = document.createTextNode(text);
li.onclick = (click) => {
const isHidden = !output.isDatasetVisible(index);
output.setDatasetVisibility(index, isHidden);
updateLegend(click, output);
};
ul.appendChild(li);
li.appendChild(spanBox);
li.appendChild(p);
p.appendChild(textNode);
});
chartBox.prepend(div);
div.appendChild(ul);
}
}
const customLegend = {
id: 'customLegend',
afterDraw(chart, args, options) {
generateLegend(chart, '.chart-container');
},
};
我在下面创建了一个示例,在单击数据集2时,我不仅希望删除现在的条形,而且希望[A, B, C]
占据整个x轴空间,因为[D,E,F]
不再有可见数据......这是否需要创建自己的数据子集并触发重绘?任何建议都将非常有帮助!!
第一个
1条答案
按热度按时间bihw5rsg1#
我通过在配置之外存储单独的数据集,并根据按钮点击切换配置指向的内容来解决这个问题。
我使用
d3
的汇总函数对数据进行分组,然后利用fade类来查看哪些数据集应该显示,哪些不应该显示!第一个