vue-chartjs

对于第三方控件的使用，可参考的文档：官网、或查询导入的第三方代码

vue-chartjs图表数据结构为：数据结构官网： http://www.chartjs.org/docs/latest/charts/line.html#cubicInterpolationMode

（

this.renderChart（data, options）

其中官网中的

Configuration options 都是options中的属性。

Chart.defaults.global  就是和options同级别的。

例子：

options: {          tooltips: {            intersect: false // default: true. if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.          },          animation: {            duration: 1  // 动画时长          },          responsive: true, // 长宽，100%.如果要单设长和宽的话，要将responsive 设为false          maintainAspectRatio: false // 保持长宽比        }

）

数据结构例子：

chartData: {        labels: [          '', '', '', '', '', '', '', '', '', ''          ,          '', '', '', '', '', '', '', '', '', '',          '', '', '', '', '', '', '', '', '', '',          '', '', '', '', '', '', '', '', '', '',          '', '', '', '', '', '', '', '', '', '',          '', '', '', '', '', '', '', '', '', ''        ],        datasets: [          {            label: '租户:' + (self.tanent==null? "all" :self.tanent) + '   group:' + (self.groupName==null? "all" :self.groupName) + "   event:" + (self.event==null? "all" :self.event),//            backgroundColor: "rgba(255,255,255,0",//            borderColor: '#FC2525',//            pointBackgroundColor: 'FC2525',//            borderWidth: 1,//            pointBorderColor: 'FC2525',            backgroundColor: null,            data: [              null, null, null, null, null, null, null, null, null, null              ,              null, null, null, null, null, null, null, null, null, null,              null, null, null, null, null, null, null, null, null, null,              null, null, null, null, null, null, null, null, null, null,              null, null, null, null, null, null, null, null, null, null,              null, null, null, null, null, null, null, null, null, null            ]          }        ]      }

注释掉的部分就是它内部的属性。 backgroundColor是所有的背景色，border是线条颜色，point是点颜色

vue-chartjs

这是vue的图表控件：http://vue-chartjs.org/#/home?id=installation

npm install vue-chartjs -snpm install chart.js -s

代码示例：

<script>  import {Line, mixins} from 'vue-chartjs'  const { reactiveProp } = mixins  export default Line.extend({    mixins: [reactiveProp],    props: ['chartData'],    mounted () {      this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})    }  })</script>

这段代码的作用就是自己封装了一个折线图控件，这个可以是js文件，也可以是没有template的vue文件。

为什么用mixins。这个是用来判断图表的chartData；来自哪里？是这几的data:function(){return{}} 还是props：【】中，如果是reactiveProp则来自props。如果是reactiveData则来自自己的data方法中的return中。

那为什么renderChart方法中第一个参数一定要chartData呢？因为，reactiveProp.js 和reactiveData。js中只有对chartData的watch。

vue-chartjs插件

’

reactiveProp.js的代码

module.exports = {  props: {    chartData: {      required: true    }  },  watch: {    'chartData': {      handler (newData, oldData) {        if (oldData) {          let chart = this._chart          // Get new and old DataSet Labels          let newDatasetLabels = newData.datasets.map((dataset) => {            return dataset.label          })          let oldDatasetLabels = oldData.datasets.map((dataset) => {            return dataset.label          })          // Stringify 'em for easier compare          const oldLabels = JSON.stringify(oldDatasetLabels)          const newLabels = JSON.stringify(newDatasetLabels)          // Check if Labels are equal and if dataset length is equal          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {            newData.datasets.forEach((dataset, i) => {              // Get new and old dataset keys              const oldDatasetKeys = Object.keys(oldData.datasets[i])              const newDatasetKeys = Object.keys(dataset)              // Get keys that aren't present in the new data              const deletionKeys = oldDatasetKeys.filter((key) => {                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1              })              // Remove outdated key-value pairs              deletionKeys.forEach((deletionKey) => {                delete chart.data.datasets[i][deletionKey]              })              // Update attributes individually to avoid re-rendering the entire chart              for (const attribute in dataset) {                if (dataset.hasOwnProperty(attribute)) {                  chart.data.datasets[i][attribute] = dataset[attribute]                }              }            })            chart.data.labels = newData.labels            chart.update()          } else {            chart.destroy()            this.renderChart(this.chartData, this.options)          }        } else {          this.renderChart(this.chartData, this.options)        }      }    }  }}

reactiveData.js

module.exports = {  data () {    return {      chartData: null    }  },  watch: {    'chartData': {      handler (newData, oldData) {        if (oldData) {          let chart = this._chart          // Get new and old DataSet Labels          let newDatasetLabels = newData.datasets.map((dataset) => {            return dataset.label          })          let oldDatasetLabels = oldData.datasets.map((dataset) => {            return dataset.label          })          // Stringify 'em for easier compare          const oldLabels = JSON.stringify(oldDatasetLabels)          const newLabels = JSON.stringify(newDatasetLabels)          // Check if Labels are equal and if dataset length is equal          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {            newData.datasets.forEach((dataset, i) => {              // Get new and old dataset keys              const oldDatasetKeys = Object.keys(oldData.datasets[i])              const newDatasetKeys = Object.keys(dataset)              // Get keys that aren't present in the new data              const deletionKeys = oldDatasetKeys.filter((key) => {                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1              })              // Remove outdated key-value pairs              deletionKeys.forEach((deletionKey) => {                delete chart.data.datasets[i][deletionKey]              })              // Update attributes individually to avoid re-rendering the entire chart              for (const attribute in dataset) {                if (dataset.hasOwnProperty(attribute)) {                  chart.data.datasets[i][attribute] = dataset[attribute]                }              }            })            chart.data.labels = newData.labels            chart.update()          } else {            chart.destroy()            this.renderChart(this.chartData, this.options)          }        } else {          this.renderChart(this.chartData, this.options)        }      }    }  }}

Configuration options