Linechart 如何将数据集切换添加到Chart.js？

目标：点击

图表

图例

我想显示/隐藏对应的行。 我正在使用Chart.legend.js创建

legend

。我知道我问了同样的问题，但是我不能使用jQuery

有什么想法吗

---

谢谢

您只需将链接问题中的jQuery函数替换为它们的Javascript等价物即可

1.

var ctx=jQuery（#LineChart”）.get（0.getContext（“2d”）

变成

SPOn = document.getElementsByClassName('sp')[0].className.indexOf('enabled') != -1;
NCOn = document.getElementsByClassName('nc')[0].className.indexOf('enabled') != -1;
SPAOn = document.getElementsByClassName('sp-avg')[0].className.indexOf('enabled') != -1;
NCAOn = document.getElementsByClassName('nc-avg')[0].className.indexOf('enabled') != -1;

function toggleLine(t) {

if (t.className.indexOf('enabled') == -1)
     t.className += ' enabled'
else
     t.className = t.className.replace('enabled', '');

var ctx=document.getElementById（“线形图”）.getContext（“2d”）

2.

变成

SPOn = document.getElementsByClassName('sp')[0].className.indexOf('enabled') != -1;
NCOn = document.getElementsByClassName('nc')[0].className.indexOf('enabled') != -1;
SPAOn = document.getElementsByClassName('sp-avg')[0].className.indexOf('enabled') != -1;
NCAOn = document.getElementsByClassName('nc-avg')[0].className.indexOf('enabled') != -1;

function toggleLine(t) {

if (t.className.indexOf('enabled') == -1)
     t.className += ' enabled'
else
     t.className = t.className.replace('enabled', '');

3.

jQuery（document）.ready（function（）{

在标记结束之前变成javascript块（有其他方法可以做到，但这似乎是最容易演示的）

4.

jQuery（'.chart切换a'）。单击（function（）{

变成

SPOn = document.getElementsByClassName('sp')[0].className.indexOf('enabled') != -1;
NCOn = document.getElementsByClassName('nc')[0].className.indexOf('enabled') != -1;
SPAOn = document.getElementsByClassName('sp-avg')[0].className.indexOf('enabled') != -1;
NCAOn = document.getElementsByClassName('nc-avg')[0].className.indexOf('enabled') != -1;

function toggleLine(t) {

if (t.className.indexOf('enabled') == -1)
     t.className += ' enabled'
else
     t.className = t.className.replace('enabled', '');

及

不使用jQuery-

请注意，我已将所有内容移动到HTML块-这主要用于上面列表中的#3。
Thank you@potatopeelings，我更新了整个项目，您给了我很大的帮助，希望能够继续自己开发。谢谢，现在我又遇到了一个新问题，当添加新点时，它们没有“pointHighlightFill”和“poin”tHighlightStroke’properties.这是从“2015”中可以看到的更新提琴点在muose结束后不会变白。我会尝试一下。你可能也想问一个单独的问题顺便说一句-我怀疑你会看到很多人在看这个问题，因为它已经回答了+这是在评论中。干杯！只需添加currentChart.datasets.forEach（函数（e）{e.points[e.points.length-1]。highlightFill=“#fff”}）；在添加新数据之后。Fiddle-（如果需要设置任何其他不会结转的属性，只需在同一个函数中设置它）