vue-chartjs

╰+攻爆jí腚メ 2022-06-12 14:40 131阅读 0赞

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

vue-chartjs图表数据结构为：数据结构官网： [ http://www.chartjs.org/docs/latest/charts/line.html\#cubicInterpolationMode][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][http_vue-chartjs.org_home_id_installation]

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

代码示例：

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

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

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

vue-chartjs插件

’![Center][]

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][http_www.chartjs.org_docs_latest_general_interactions_events.html]

[http_www.chartjs.org_docs_latest_charts_line.html_cubicInterpolationMode]: http://www.chartjs.org/docs/latest/charts/line.html#cubicInterpolationMode
[http_vue-chartjs.org_home_id_installation]: http://vue-chartjs.org/#/home?id=installation
[Center]: /images/20220612/1cb5f8717a7a4956bd89b00241ad0e03.png
[http_www.chartjs.org_docs_latest_general_interactions_events.html]: http://www.chartjs.org/docs/latest/general/interactions/events.html

vue-chartjs

发表评论取消回复

还没有评论，来说两句吧...

相关阅读