Question

我在Morris.js中找到了一些我无法解释的东西，并希望这里有人可以提供帮助。

我创建了两个JS小提琴来说明问题。

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

$("#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收到了相同的更改！

解决方法/解决方案：（js in comment）是初始化目标数组

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

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

Q2：为什么解决方法有效？

我不确定这是不是一个错误（在此处报告 - 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中的奇怪变量修改

1 个答案: