Morris.js 中的奇怪变量修改

Question

我在 Morris.js 中发现了一些我无法解释的内容，希望这里有人可以提供帮助。

我创建了两个 JS fiddles 来说明问题。

有问题的版本：（js fiddle 包含在评论中）

$("#input").change(function () {
    chart_1.options.goals[0] = $("#input").val();
    chart_1.redraw();
    chart_2.redraw();
});

chart_1 = new Morris.Bar({
    element: 'chart_1', 
    barColors: ["black"], 
    goalLineColors: ["blue"], 
    data: [
        {year: "2008", value: 5}, 
        {year: "2009", value: 10}, 
        {year: "2010", value: 15}, 
        {year: "2011", value: 20}, 
        {year: "2012", value: 25}, 
    ], 
    xkey: 'year', 
    ykeys: ['value'], 
    labels: ['value']});

chart_2 = new Morris.Bar({
    element: 'chart_2', 
    barColors: ["blue"], 
    goalLineColors: ["red"], 
    data: [
        {year: "2008", value: 25}, 
        {year: "2009", value: 20}, 
        {year: "2010", value: 15}, 
        {year: "2011", value: 10}, 
        {year: "2012", value: 5}, 
    ], 
    xkey: 'year', 
    ykeys: ['value'], 
    labels: ['value']});

如您所见，我只修改了 chart_1，但 chart_2 收到了相同的更改！

A workaround/solution:(评论中的jsfiddle)是初始化goals数组

chart_1 = new Morris.Bar({
    element: 'chart_1',
    barColors: ["black"],
    goals: [],

Q1：这个问题怎么可能呢？我没有触及 chart_2，但它正在被修改（通过检查 chrome 开发人员工具中的对象来确认）。

问题 2：为什么解决方法有效？

我不确定这是不是一个错误（在此处报告 - https://github.com/morrisjs/morris.js/issues/656 - 但考虑到 Morris.js 不再更新，所以寻求帮助似乎是更好的选择！）或者如果我'我未能理解 JS 中的某些内容 - 无论哪种方式，期待学习一些东西。

Answer 1

这似乎正在发生，因为当 morris.js 将默认图表选项与您的图表选项合并时，它会保留对默认图表选项中数组的引用。所以多次合并时，每次都会指向同一个数组

在您有问题的代码中，您可以通过比较数组来测试它：

console.log(chart_1.options.goals === chart_2.options.goals); // logs true

因为它们是相同的，所以 chart_1.options.goals[0] = $("#input").val(); 与 chart_2 相同，因为它们对相同的目标数组进行操作。

这也是您的解决方法有效的原因。您要确保每个图表都有一个不同的数组。如果您在解决方法代码中进行与上述相同的比较，您会发现它们并不相同。

Morris.js 中的奇怪变量修改

Strange Variable modifications in Morris.js

javascript

morris.js