在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中使用過）
這樣，您可以判斷代碼是否運行。

例

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

例如

UPDATED2
我發現數據集可以具有任何參數，因此您可以添加任何參數。
例如，我添加了“ barId”並修改了滑塊（添加了id，與“ barId”相同。）
例如