vue-chartjs

最新推荐文章于 2025-11-14 06:56:38 发布

原创最新推荐文章于 2025-11-14 06:56:38 发布 · 9.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

7 篇文章

订阅专栏

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

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

禁止chart图表自己的事件：

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.
          },
          events:[], // 禁止了它所有的events
          responsive: false, // true: 长宽，100%; 如果要单设长和宽的话，要将responsive 设为false
          maintainAspectRatio: false // 保持长宽比
        }

events中的值为： http://www.chartjs.org/docs/latest/general/interactions/events.html