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

html5 chart.js混合模式一周图表数据展示代码,显示本周与前一周数据曲线图,可直观的进行对比。

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录