Question

目标：点击chart legend我想显示/隐藏相应的行。我正在使用 Chart.legend.js 来创建legend。我知道How to add a dataset toggle to Chart.js?问了同样的问题但是我不能使用jQuery。

有什么想法吗？

谢谢

Answer 1

您可以通过Javascript等效项替换您链接到的问题中的jQuery函数。

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', '');

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

请注意，我已将所有内容移至HTML块 - 主要针对上面列表中的＃3。

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

1 个答案: