vue-chartjs

最新推荐文章于 2024-10-18 11:08:54 发布

原创最新推荐文章于 2024-10-18 11:08:54 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何结合Vue.js和Chart.js库来创建交互式的数据图表。通过具体的DEMO展示和API讲解，作者详细阐述了代码实现过程，帮助读者理解如何在Vue组件中集成Chart.js进行数据可视化。

DOCUMENT：
https://www.chartjs.org/docs/latest/charts/line.html
DEMO：
http://demo.vue-chartjs.org/
API：
https://vue-chartjs.org/zh-cn/

demo code:

//chart.vue
<script>
import { Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ["options"],
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
  watch: {
    chartData: function(val, oldVal) {
      console.log("watcher invoked");
      this.$data._chart.destroy();
      this.renderChart(this.chartData, this.options);
    }
  }
};
</script>

//useChart.vue
<template>
	<line-chart class="w-100 plineChart" :chart-data="chartdata" :options="options"></line-chart>
</template>

<script>
import lineChart from "@/components/chart";
export default {
	data(){
		labels:[2, 4, 6, 8, 10],
		aLineArr:[0, 1, 2, 3, 4, 5],
		bLineArr:[10, 20, 30, 40, 50],
		chartData:null,
		options:{
        	legend: {
          		position: "bottom"
        	},
        	scales: {
          		yAxes: [
            		{
              			id: "A",
              			type: "linear",
              			position: "left"
            		}
          		]
        	},
        	elements: {
          		line: {
            		fill: false
          		}
        	},
        	responsive: true,
        	maintainAspectRatio: false
      	}
	},
	components: {
    	lineChart: lineChart
	},
	methods:{
		getChartData(){
			this.chartdata = {
        		labels: labels,
        		datasets: [
          			{
			            label: "A Line",
			            lineTension: 0, //偏移度 0是直线 
			            backgroundColor: "#41c7db",
			            borderColor: "#41c7db",
			            data: aLineArr,
			            yAxisID: "A"
			        },
	          		{
			            label: "B Line",
			            lineTension: 0, //偏移度 0是直线 
			            backgroundColor: "green",
			            borderColor: "green",
			            data: bLineArr,
			            yAxisID: "A"
			        }
        		]
      		}
		}
	}
}
</script>