vue-chartjs ╰+攻爆jí腚メ 2022-06-12 14:40 146阅读 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 代码示例: <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插件 ’![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
还没有评论,来说两句吧...