在Chart.js中实现范围滑块

Question

此错误发生在两天前，我想确定

Answer 1

您仍然有动力解决这个问题吗？
真的，这很容易。但是，您需要更多地了解其工作原理。

首先，您将此代码写在$（document）.ready上，这意味着该代码仅在页面准备就绪后运行。 无法更新图表。

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，您需要更新数据集中的值，并调用其update方法。您只能更新一个数据集。

// 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'并修改了滑块（添加了id，与'barId'相同。）
For example