在 Chart.js 中实现范围滑块

Question

这个错误发生在两天前，我想确认一下

Answer 1

你还有动力去解决这个问题吗？
这真的很容易。但是，您需要更多地了解它是如何工作的。

首先，你把这段代码写在了$(document).ready上，也就是说这段代码只有运行 after page ready.(once) 图表无法更新。

var heating[] = parseInt(document.querySelector('#points').value);

此外，您添加了活动。

<input type="range" class="slider" value="5" min="30" max="50" id="points" onchange="function()">

这个事实说明你真的不懂事。通常，你需要像这样调用一个函数。

<input type="range" class="slider" value="5" min="30" max="50" id="points" onchange="testFunction()">

function testFunction() {
    // update chart...
}

或者添加事件（我这次用的是jQuery）

<input type="range" class="slider" value="5" min="30" max="50" id="points">

$("#points").on("change", function() {
    // update chart...
});

最后，要更新Chart.js，您需要更新数据集中的值，并调用其更新方法。您可以只更新一个数据集。

// Get heating datasets. (Yes, you can write 'barGraph.data.datasets[7].data = xxx')
var heatDatasts = barGraph.data.datasets[7];
// Update value
heatDatasts.data = [$(this).val()];
// Apply it to the view.
barGraph.update();

如果您不能使用调试工具，我建议至少使用警报。（我在 jsfiddle 中使用过）
这样你就可以判断代码是运行还是不是。

Example

UPDATED1
第一个问题。
图片更新了，希望大家理解
有多种方式，但我选择了两种。

/*************** Pattern1 (Simply, using jQuery each) ***************/
// Loop
$.each(barGraph.data.datasets, function() {
    // Check the label or stack, in this case.
    if (this.label === "Heating Electrification") {
        // It's okay
        // heatDatasets = this;
        // Set value is also okay.
        this.data = [sliderValue];
        return false;
    }
});
 /*************** Pattern2 (using jQuery grep or filter)***************/
 var heatDatasets = $.grep(barGraph.data.datasets, function(datasets) {
     return (datasets.label === "Heating Electrification");
 })[0];
 heatDatasets.data = [sliderValue];

第二个问题
基本上，我们不在 HTML 上使用 JavaScript 变量。不过，某些框架或库看起来是可行的。

// Set value, min and max.
// We can't use JavaScript variable on HTML, usually.
var slider = $("#points");
slider.prop("min", 0);
slider.prop("max", 1000);
slider.val(1000);

For example

UPDATED2
我发现数据集可以有任何参数，所以你可以添加任何参数。
比如我加了'barId'，修改了sliders（加了id，和'barId'是一样的）
For example

在 Chart.js 中实现范围滑块

Implementing range slider in Chart.js

javascript

chart.js

uislider