数据可视化清新版【chart.js】学习笔记12.0—面积图表

最新推荐文章于 2023-03-10 11:28:26 发布

LIMI_伞梦

最新推荐文章于 2023-03-10 11:28:26 发布

阅读量527

点赞数

分类专栏：数据可视化前端编程文章标签： javascript 前端数据可视化

本文链接：https://blog.csdn.net/qq_36288559/article/details/112461685

版权

前端编程同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

数据可视化

14 篇文章 4 订阅

订阅专栏

数据可视化清新版【chart.js】学习笔记

模式	类型	值
绝对数据集索引	Number	1, 2, 3, …
相对数据集索引	String	‘-1’, ‘-2’, ‘+1’, …
边界	String	‘start’, ‘end’, ‘origin’
配置状态	Boolean	false，true

官方文档：https://www.chartjs.org/docs/latest/charts/area.html

展示

fill:true/fill:‘origin’。也是默认情况。在这里插入图片描述

let ctx = document.getElementById("myChart10");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
               label: '# of Votes',
               type: 'line',
               fill:true,//fill:'origin'两者设置效果相同均为默认样式
               lineTension:0,
               data: [12, 10, -3, -6, 0,10],
               backgroundColor: 'rgb(0,179,235,0.4)',
               borderColor: 'rgb(0,179,235)',
               pointBackgroundColor:'rgb(0,179,235)',
               borderWidth: 1,
               order:2,
         }],
	},
    options:options,
});

fill:false。不进行填充样式。
在这里插入图片描述
fill:‘start’。以线为顶从上向下填充。

fill:‘end’。以线为底，从下往上填充。

fill：绝对数据集索引。这里的索引按照你图表书写的顺序从上往下一次递增的，从0开始，也就是第一个的索引为0。对自己无法填充。
0：fill:1:1：fill:false，索引0图表向索引1图表填充，索引1图表不填充。
在这里插入图片描述

let ctx = document.getElementById("myChart10");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
        {
               label: '# of Votes',
               type: 'line',
               fill:1,//fill:'origin'两者设置效果相同均为默认样式
               lineTension:0,
               data: [12, 10, -3, -6, 0,10],
               backgroundColor: 'rgb(0,179,235,0.4)',
               borderColor: 'rgb(0,179,235)',
               pointBackgroundColor:'rgb(0,179,235)',
               borderWidth: 1,
               order:2,
         },
        {
               label: '# of Votes',
               type: 'line',
               fill:false,//fill:'origin'两者设置效果相同均为默认样式
               lineTension:0,
               data: [12, 10, -3, -6, 0,10],
               backgroundColor: 'rgba(255,111,82,0.4)',
               borderColor: 'rgb(255,111,82)',
               pointBackgroundColor:'rgb(255,111,82)',
               borderWidth: 1,
               order:2,
         },
         ],
	},
    options:options,
});

0：fill:false:1：fill:0，索引0图表不填充，索引1图表向索引0图表填充。
在这里插入图片描述
0：fill:1:1：fill:0，相互填充。

fill：相对数据集索引。正的表示向下面几个填充，如‘+1’就是向下面一个填充，反之，负的表示向上面第几个填充，如‘-1’就是向上面一个填充，‘0’向全部第一个填充。
相互填充。
在这里插入图片描述

let ctx = document.getElementById("myChart10");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
        {
               label: '# of Votes',
               type: 'line',
               fill:'+1',//fill:'origin'两者设置效果相同均为默认样式
               lineTension:0,
               data: [12, 10, -3, -6, 0,10],
               backgroundColor: 'rgb(0,179,235,0.4)',
               borderColor: 'rgb(0,179,235)',
               pointBackgroundColor:'rgb(0,179,235)',
               borderWidth: 1,
               order:2,
         },
        {
               label: '# of Votes',
               type: 'line',
               fill:'-1',//fill:'origin'两者设置效果相同均为默认样式
               lineTension:0,
               data: [12, 10, -3, -6, 0,10],
               backgroundColor: 'rgba(255,111,82,0.4)',
               borderColor: 'rgb(255,111,82)',
               pointBackgroundColor:'rgb(255,111,82)',
               borderWidth: 1,
               order:2,
         },
         ],
	},
    options:options,
});

fill:‘0’
在这里插入图片描述

数据可视化清新版【chart.js】学习笔记

LIMI_伞梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化清新版【chart.js】学习笔记12.0—面积图表

面积图是相对于fill配置形成的，而折线图和雷达图都支持数据集对象上的fill选项，该选项可用于创建两个数据集之间的区域或数据集与边界之间的区域，fill存在以下设置情况：|模式类型值绝对数据集索引Number1, 2, 3, …相对数据集索引String‘-1’, ‘-2’, ‘+1’, …边界String‘start’, ‘end’, ‘origin’配置状态Booleanfalse，true官方文档：https://www.chart.
复制链接

扫一扫