html5 chart.js混合模式一周图表数据展示代码

来源:https://www.sucaihuo.com/js/3202.html 2017-11-10 11:50浏览(1811) 收藏

html5 chart.js混合模式一周图表数据展示代码,显示本周与前一周数据曲线图,可直观的进行对比。
html5 chart.js混合模式一周图表数据展示代码
分类:统计图 > 曲线图 难易:初级
查看演示 下载资源: 15 下载资源 下载积分: 10 积分

js代码

<script type="text/javascript">
var canvas = document.getElementById("canvas");

// Apply multiply blend when drawing datasets
var multiply = {
  beforeDatasetsDraw: function(chart, options, el) {
    chart.ctx.globalCompositeOperation = 'multiply';
  },
  afterDatasetsDraw: function(chart, options) {
    chart.ctx.globalCompositeOperation = 'source-over';
  },
};

// Gradient color - this week
var gradientThisWeek = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientThisWeek.addColorStop(0, '#5555FF');
gradientThisWeek.addColorStop(1, '#9787FF');

// Gradient color - previous week
var gradientPrevWeek = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientPrevWeek.addColorStop(0, '#FF55B8');
gradientPrevWeek.addColorStop(1, '#FF8787');


var config = {
    type: 'line',
    data: {
        labels: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
        datasets: [
          {
              label: 'This week',
              data: [24, 18, 16, 18, 24, 36, 28],
              backgroundColor: gradientThisWeek,
              borderColor: 'transparent',
              pointBackgroundColor: '#FFFFFF',
              pointBorderColor: '#FFFFFF',
              lineTension: 0.40,
          },
          {
              label: 'Previous week',
              data: [20, 22, 30, 22, 18, 22, 30],
              backgroundColor: gradientPrevWeek,
              borderColor: 'transparent',
              pointBackgroundColor: '#FFFFFF',
              pointBorderColor: '#FFFFFF',
              lineTension: 0.40,
          }
        ]
    },
    options: {
    		elements: { 
        	point: {
          	radius: 0,
          	hitRadius: 5, 
            hoverRadius: 5 
          } 
        },
    		legend: {
        		display: false,
        },
        scales: {
            xAxes: [{
            		display: false,
            }],
            yAxes: [{
            		display: false,
                ticks: {
                	beginAtZero: true,
              	},
            }]
        }
    },
    plugins: [multiply],
};

window.chart = new Chart(canvas, config);
</script>
评论16
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 15楼
    05-17 18:32
    S***♚
    比一般的图表好看得多,不错的效果
  • 头像 14楼
    12-19 08:19
    宝***志
    很漂亮的效果
  • 头像 13楼
    11-25 13:15
    S***
    效果很厉害!想要!
  • 头像 12楼
    11-22 18:29
    网***¨
    这个效果太棒了,给你!准备拿来用!
  • 头像 11楼
    11-20 10:41
    f***y
    chartjs...采集数据后用下
  • 头像 10楼
    11-15 21:05
    问***天
    漂亮de 很啊
  • 头像 9楼
    11-14 12:54
    (***)
    漂亮,知识就是力量,知识就是财富啊~
  • 头像 8楼
    11-14 09:28
    哈***塔
    很漂亮的效果
  • 头像 7楼
    11-14 09:15
    余***鱼
    很漂亮的效果!
  • 头像 6楼
    11-13 10:19
    避***湾
    很漂亮的效果!
1 2