在 Chart.js 中实现范围滑块

Posted 2023-03-13

【中文标题】在 Chart.js 中实现范围滑块

【英文标题】：Implementing range slider in Chart.js

【发布时间】：2018-07-23 19:13:52

【问题描述】：

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

【问题讨论】：

如果有人在某个时候遇到此问题，请尝试回滚到版本 3。对我来说，它表示编辑队列当前已满。

【参考方案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

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

/*************** 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

更新2 我发现数据集可以有任何参数，所以你可以添加任何参数。 比如我加了'barId'，修改了滑块（加了id，和'barId'一样）For example

【讨论】：

嗨，非常感谢您的回复。它奏效了，我非常感谢你给我的所有帮助。然而，快速的问题是，是否不可能将输入范围分配给特定变量。而不是 eah 数据集，因为在切换输入范围后对数据进行排序时，它不对应于同一个变量。我试过这样的事情：

var heatDatasts = barGraph.data.datasets[mpg];但它没有工作

另外，是否可以有自定义的最小和最大范围，这将使它更容易。因为当我从每个位置获取数据时，我不想有预设的数据范围，而是更灵活。例如，，在 this 中 min="0 和 max="this。 currentvalue(mpg) 或任何特定变量。您可能知道，记录最小值和最大值并不是效率

对不起，我不明白你说的其他参数是什么意思。难道不只是 var heatDatasts = barGraph.data.datasets[mpg];

我的意思是我更新图像、标签、背景颜色等的列。我稍后会告诉你，包括第二个问题。