昨天我们成功安装 Highcharts-Vue 并绘制出一个基本的图表，不过既然都已经使用 Vue 了，我们应该要好好运用「资料绑定」的概念，也就是当资料变动时，我们不需要再额外操作图表，图表就会自己动态的更新变化。

Data Binding

我们在「资料更新 Method」有说过，在网页中资料不会总是静态的，所以当资料变动时，我们需要透过一些 Method 的呼叫来更新图表，不过当我们使用前端框架後，图表应该要可以自己响应资料的变动进而更新画面，那下面我们就来把昨天的 Chart.vue 改写一下。

1.资料形式调整

首先要把资料改写一下，照理说原始资料应该比较难像昨天那样是已经处理过的模样，所以我们另外用 data 物件来模拟从後端拿到的资料，然後将 chartOptions 里面的 xAxis.categories 和 series.data 给清空，因为这两个属性的值应该是原始资料处理过後才拿得到的。

data() {
  return {
    data: {
      "18-24岁": 12,
      "25-29岁": 18,
      "30-34岁": 22,
      "35-39岁": 25,
      "40-44岁": 32,
      "45-49岁": 35,
      "50-54岁": 26,
      "55岁+": 18
    },
    chartOptions: {
      chart: { type: "column" },
      title: { text: "公司员工年龄分布" },
      xAxis: { categories: [] },
      yAxis: { 
        title: { text: "人数" }
      },
      series: [{ 
        name: "XX公司员工",
        data: []
      }]
    }
  };
}

2.撰写 computed

那因为现在原始资料的格式并不是我们要的，而且未来资料还有可能会变动，所以可以选择用 Vue 的 computed 来帮我们处理资料，而且它也会在资料变动时自动更新。

那其中 xAxisCate 和 seriesData 就是用来处理资料的，而 options 则是将资料与图表设定进行结合，最後导出一个完整的 options 物件。

computed: {
  xAxisCate() {
    return Object.keys(this.data);
  },
  seriesData() {
    return Object.values(this.data);
  },
  options() {
    let options = Object.assign(this.chartOptions, {});
    options.xAxis.categories = this.xAxisCate;
    options.series[0].data = this.seriesData;
    return options;
  }
}

3.资料绑定

有了 options 物件後，就可以把它作为 prop 传入 <highcharts>，然後就可以看到跟昨天一样的结果了。

<template>
  <highcharts :options="options"></highcharts>
</template>

4.资料变动

经过前面几个步骤後，我们已经将资料与图表做了绑定，接下来就要看看在资料改变时，图表是否会更新画面了。我们可以在画面上新增以几个按钮，并绑定事件。

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
    <button @click="changeData">改变资料</button>
    <button @click="changeType('line')">改为折线图</button>
    <button @click="changeType('column')">改为柱状图</button>
  </div>
</template>

我们分别为按钮绑定改变原始资料和图表设定的 methods，看看图表能不能在点击按钮後成功更新。

methods: {
  changeData() {
    this.xAxisCate.forEach((key) => {
      this.data[key] = Math.floor(Math.random() * 20);
    });
  },
  changeType(type) {
    this.options.chart.type = type;
  }
}

实际测试後，发现图表确实的在资料发生变动的时候自动响应了新的图表设定，并且根据设定进行了画面上的更新。

　
今天算是真正使用上了 Vue 的特性来绘制 Highcharts 的图表，透过资料绑定的方式让图表可以响应资料的改变，让我们可以专注在资料的处理，而不用一再的操作图表或呼叫 Method。

不过我今天的范例算是相当粗略，目的只在於向大家展示「资料绑定」的概念，假如你有 Vue 的开发经验，肯定可以大幅改善这个元件的弹性、重用性。而明後两天我也会透过比较完整的应用来展示更多 Highcharts-Vue 的使用方式。