Highcharts-vue 无法更新数据/系列答案

【问题标题】：Highcharts-vue fails to update data/seriesHighcharts-vue 无法更新数据/系列
【发布时间】：2019-09-05 09:00:19
【问题描述】：

我正在尝试动态更新高脚椅中的数据。从长远来看，这个想法是有一个下拉列表，但现在我专注于让一个按钮正常工作。

https://codesandbox.io/s/vue-template-ub45g

这是一个定制的图表，因此该系列中有很多数据。到目前为止，我有一个包含图表的文件（即 Rose.vue）和一个 App.vue 文件。在 App.vue 中，我有两个变量（仅作为示例），original 和 updatedData。理论上，如果我按下按钮，它应该将系列更新为 updatedData。但是，每当我按下它时，什么都没有发生。数据很好，好像我在代码中手动更改了系列，图表也更新了。但是，我不确定为什么按钮没有做它应该做的事情。

代码如下，但最好查看codesandbox示例。

    <template>
  <div>
    <Rose v-bind:options="chart1"/>
    <button @click="updateChart()">Update chart</button>
  </div>
</template>

<script>
import Rose from "@/components/Rose";

export default {
  components: {
    Rose
  },
  data() {
    return {
      chart1: {
        title: {
          text: null
        },
        subtitle: {
          text: null
        },
        legend: {
          enabled: false
        },
        series: original.value
      }
    };
  },
  methods: {
    updateChart() {
      this.chart1.series = updatedData.value;
    }
  }
};

var original = {
  name: "Aalst",
  value: [
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 0,
      pointRange: 0.5
    },
    {
      data: [1.99759968],
      type: "column",
      color: "#1DACE8",
      name: "S_N_AT_Park_tot",

      pointStart: 0,
      pointRange: 25.71
    },

    {
      data: [3.069066148],
      type: "column",
      color: "#1DACE8",
      name: "S_N_CA_Park_tot",

      pointStart: 25.71,
      pointRange: 25.71
    },

    {
      data: [4.762283492],
      type: "column",
      color: "#1DACE8",
      name: "S_N_BTM",

      pointStart: 51.42,
      pointRange: 25.71
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 77.13,
      pointRange: 0.5
    },

    {
      data: [5.472831225],
      type: "column",
      color: "#AEA8A8",
      name: "S_N_TR",
      pointStart: 77.13,
      pointRange: 25.71
    },
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 102.84,
      pointRange: 0.5
    },

    {
      data: [5.089290648],
      type: "column",
      color: "#F24D29",
      name: "S_P_DE",

      pointStart: 102.84,
      pointRange: 25.71
    },

    {
      data: [8.593398356],
      type: "column",
      color: "#F24D29",
      name: "S_P_DI",

      pointStart: 128.55,
      pointRange: 25.71
    },

    {
      data: [5.06165564],
      type: "column",
      color: "#F24D29",
      name: "S_P_DG",

      pointStart: 154.26,
      pointRange: 25.74
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 180,
      pointRange: 0.5
    },

    {
      data: [3.63565202],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_sec",

      pointStart: 180,
      pointRange: 19.2825
    },

    {
      data: [2.033564998],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_tert",

      pointStart: 199.2825,
      pointRange: 19.2825
    },

    {
      data: [1.464012915],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_work",

      pointStart: 218.465,
      pointRange: 19.2825
    },

    {
      data: [1.284840194],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_other",

      pointStart: 237.6475,
      pointRange: 19.2825
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 256.83,
      pointRange: 0.5
    },

    {
      data: [5.840454632],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_orig",

      pointStart: 256.83,
      pointRange: 8.57
    },

    {
      data: [1.153663761],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_rid",

      pointStart: 265.4,
      pointRange: 8.57
    },

    {
      data: [4.159545368],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_dest",

      pointStart: 273.97,
      pointRange: 8.57
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 282.54,
      pointRange: 0.5
    },

    {
      data: [1.283496592],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_walk",

      pointStart: 282.54,
      pointRange: 25.71
    },

    {
      data: [4.765886288],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_bike",

      pointStart: 308.25,
      pointRange: 25.71
    },

    {
      data: [4.72029121],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_far",

      pointStart: 333.96,
      pointRange: 26.04
    }
  ]
};

var updatedData = {
  name: "Anzegem",
  value: [
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 0,
      pointRange: 0.5
    },
    {
      data: [0.128017069],
      type: "column",
      color: "#1DACE8",
      name: "S_N_AT_Park_tot",

      pointStart: 0,
      pointRange: 25.71
    },

    {
      data: [0.403696498],
      type: "column",
      color: "#1DACE8",
      name: "S_N_CA_Park_tot",

      pointStart: 25.71,
      pointRange: 25.71
    },

    {
      data: [0.253077371],
      type: "column",
      color: "#1DACE8",
      name: "S_N_BTM",

      pointStart: 51.42,
      pointRange: 25.71
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 77.13,
      pointRange: 0.5
    },

    {
      data: [3.734963849],
      type: "column",
      color: "#AEA8A8",
      name: "S_N_TR",
      pointStart: 77.13,
      pointRange: 25.71
    },
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 102.84,
      pointRange: 0.5
    },

    {
      data: [0.867670432],
      type: "column",
      color: "#F24D29",
      name: "S_P_DE",

      pointStart: 102.84,
      pointRange: 25.71
    },

    {
      data: [3.47744926],
      type: "column",
      color: "#F24D29",
      name: "S_P_DI",

      pointStart: 128.55,
      pointRange: 25.71
    },

    {
      data: [0.994857797],
      type: "column",
      color: "#F24D29",
      name: "S_P_DG",

      pointStart: 154.26,
      pointRange: 25.74
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 180,
      pointRange: 0.5
    },

    {
      data: [0],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_sec",

      pointStart: 180,
      pointRange: 19.2825
    },

    {
      data: [0],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_tert",

      pointStart: 199.2825,
      pointRange: 19.2825
    },

    {
      data: [0.36406198],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_work",

      pointStart: 218.465,
      pointRange: 19.2825
    },

    {
      data: [0.748181912],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_other",

      pointStart: 237.6475,
      pointRange: 19.2825
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 256.83,
      pointRange: 0.5
    },

    {
      data: [9.28512162],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_orig",

      pointStart: 256.83,
      pointRange: 8.57
    },

    {
      data: [0.027799127],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_rid",

      pointStart: 265.4,
      pointRange: 8.57
    },

    {
      data: [0.71487838],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_dest",

      pointStart: 273.97,
      pointRange: 8.57
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 282.54,
      pointRange: 0.5
    },

    {
      data: [1.393719008],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_walk",

      pointStart: 282.54,
      pointRange: 25.71
    },

    {
      data: [5.832167832],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_bike",

      pointStart: 308.25,
      pointRange: 25.71
    },

    {
      data: [3.685239492],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_far",

      pointStart: 333.96,
      pointRange: 26.04
    }
  ]
};
</script>

【问题讨论】：

标签： vue.js highcharts

【解决方案1】：

尝试使用events。该事件将在带有新数据的 App 组件中发出，并在将更改 chartOptions 的 Rose 组件中接收。

App.vue：

  methods: {
    updateChart() {
      EventBus.$emit("btn-clicked", {
        newData: updatedData.value
      });
    }
  }

Rose.vue：

  created() {
    EventBus.$on("btn-clicked", data => {
      this.chartOptions.series = data.newData;
    });
  }

演示：

https://codesandbox.io/s/vue-template-tf0d8

【讨论】：