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

时间：2019-09-05 09:00:19

标签： vue.js highcharts

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

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

这是一个定制的图形，因此该系列中有很多数据。 到目前为止，我有一个带有图表的文件（即Rose.vue）和一个App.vue文件。在App.vue中，我有两个变量（仅作为示例），原始变量和UpdatedData。理论上，如果我按下按钮，它将把系列更新为updatedData。但是，每按一次它都不会发生。 数据很好，就好像我在代码中手动更改系列一样，图表也会更新。但是，我不确定为什么按钮没有按预期执行操作。

下面是代码，但是最好检查一下codeandbox示例。

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

1 个答案:

答案 0 :(得分：1)

尝试使用events进行制作。该事件将在App组件中与新数据一起发出，并在Rose组件中接收，这将更改chartOptions。

App.vue： 

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

Rose.vue： 

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

演示：

相关问题
最新问题