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

Question

GOAL: 点击 chart legend 我要 show/hide 对应的行。我正在使用 Chart.legend.js 来创建 legend。我知道问了同样的问题但是我不能使用 jQuery.

有什么想法吗？

谢谢

Answer 1

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

1.

var ctx = jQuery("#LineChart").get(0).getContext("2d");

变成

var ctx = document.getElementById("LineChart").getContext("2d");

2.

SPOn = jQuery('.sp').hasClass('enabled');
NCOn = jQuery('.nc').hasClass('enabled');
SPAOn = jQuery('.sp-avg').hasClass('enabled');
NCAOn = jQuery('.nc-avg').hasClass('enabled');

变成

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;

3.

jQuery(document).ready(function() {

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

4.

jQuery('.chart-toggles a').click(function() {

变成

function toggleLine(t) {

和

<a class="sp enabled" onclick="toggleLine(this)">Toggle SP</a>
<a class="nc enabled" onclick="toggleLine(this)">Toggle NC</a>
<a class="nc-avg enabled" onclick="toggleLine(this)">Toggle NC Avg</a>
<a class="sp-avg enabled" onclick="toggleLine(this)">Toggle SP Avg</a>

5.

jQuery(this).toggleClass('enabled');

变成

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

Fiddle 没有 jQuery - http://jsfiddle.net/htc4gyu5/

请注意，我已将所有内容移至 HTML 块 - 这主要用于上面列表中的 #3。

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

How can I add dataset toggle to Chart.js?

linechart

chart.js