Chart.js 清除数据和 line(曲线改为直线)

原创于 2020-03-25 08:32:35 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

chartJs

2 篇文章

订阅专栏

本文介绍如何使用Vue.js和Chart.js创建交互式的销售数据图表，涵盖数据加载、图表配置及动态更新等内容，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue

<canvas class="canvas" ref="popChart" :width="1000" height="400"></canvas>



import "../../../js/Chart"


if (this.el_chart) {
//如果之前有数据 重新获取数据 鼠标移入canvas 会出现前后数据晃动 ************
  this.el_chart.destroy();   
}
let ctx = this.$refs.popChart.getContext('2d');
let options = {
  type: 'line', //'radar',//'line',//'pie',//'bar',//doughnut  
  data: {
    labels: data.sale_date_list,
    datasets: [{
      label: '总销售额',
      data: data.sun_amount_list,
      backgroundColor: 'rgba(252,93,93,0.2)',
      borderColor: '#FC5D5D',
      tension:0, ////张力，0为没曲线  成为直线            *******************
    },
      {
        label: '线上销售额',
        data: data.online_amount_list,
        backgroundColor: 'rgba(113,149,250,0.2)',
        borderColor: '#7195FA',
        tension:0
      },
      {
        label: '线下销售额',
        data: data.shop_amount_list,
        backgroundColor: 'rgba(93,255,111,0.2)',
        borderColor: '#52FC6C',
        tension:0, ////张力，0为没曲线
      },
    ]
}
}
this.el_chart = new Chart(ctx,options);