chart.js使用学习—

之前介绍折线图时提到过，如果将数据集的showLine设为false，则绘制图形时只会绘制点，不会绘制点与点之间的连线，这其实就是散点图。chart.js中有单独绘制散点图的类型，即scatter，其与折线图的不同之处在于折线图中的数据是一维的，而散点图的数据集中的每组数据包含x、y两类值。
散点图支持的属性与折线图相同，在此不在赘述。

 var ctx = document.getElementById('myChart');const data = {datasets: [{label: '气泡图数据集',data: [{x: 20,y: 30}, {x: 40,y: 10},{x: 100,y: 36},{x: 80,y: 29},{x: 140,y: 110}],backgroundColor: 'rgb(255, 99, 132)'}]};var myBubbleChart = new Chart(ctx, {type: "scatter",data: data});

由上图及代码可以看出，散点图中点的位置由两个坐标确定，而折线图中的点（如下图所示），其点的位置由单个坐标确定，其横坐标仅用于显示每个数据对应的标题(lable)。

参考文献：
[1]https://baike.baidu.com/item/%E6%95%A3%E7%82%B9%E5%9B%BE/10065276?fr=aladdin
[2]https://www.chartjs.org/docs/latest/charts/scatter.html
[3]https://chartjs.bootcss.com/docs/charts/scatter.html
[4]https://blog.csdn.net/qq_36288559/article/details/112370040

chart.js使用学习——散点图相关推荐

数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area--(极地图) 极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异.当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表. ...
chart.js使用学习——折线图（1：基本用法)
折线图,即在直角坐标系中用直线串起来的一系列点形成的图形.在excel.ppt等办公软件中经常见到折线图,应用系统中也有不少统计汇总功能以折线图形式展示.本文根据参考文献1-2学习chart.js ...
图表插件 - chart.js (柱状图) 学习总结
chart.js 基于H5的canvas,轻量级的图表插件. 有6中图表类型:折线图.条形图.雷达图.饼图.柱状图.极地区域图关于柱状图的绘制,追加 .更新.删除数据等操作的总结原文来自于:htt ...
chart.js使用学习——柱状图（1：基本用法)
柱状图属于以长方形的长度为变量的统计图表[1].chart.js创建图形的方式都类似,先是数据准备,然后在chart构造函数中指定图表类型. 如下列代码及效果图所示,chart类中将类型指定为 ...
chart.js使用学习——雷达图
雷达图以二维形式综合对比多组数据的差异,常用于比较2组或更多组数据集[1].chart.js中雷达图的数据准备与其它图形相同,主要差异在于创建chart对象时,图形类型需指定为"rada ...
chart.js使用学习——饼图/环形图
饼图/环形图能够展示数据集中各项的大小与各项总和的比例.chart.js中创建饼图/环形图,只需在chart构造函数中指定图表类型为pie/doughnut即可. 基本用法创建饼图/环形图主 ...
chart.js使用学习——柱状图（2：常用属性设置)
本文介绍柱状图常用属性及效果.柱状图中有部分常用属性与折线图用法相同,本文仅列出这些属性的简要说明,不再详细说明. base 设置图形绘制时的基准值,数值型,默认值为空,设置的值为数值轴上的值 ...
chart.js使用学习——气泡图
气泡图(Bubble Chart)能够同时展示三类数据之间的关系,其中前两个维度的数据用于确定气泡的位置,第三维的数据用于确定气泡大小,因此气泡图数据集中的每条记录必须包含三个数据,不能像之前图形 ...
chart.js基本知识——调整图表尺寸
<chart.js使用学习 >最后提到测试过程中发现调用chart.js绘制的图表会自动充满父容器.如果canvas直接放在body标签下,则图标会充满整个页面,即便设置canvas的 ...

chart.js使用学习——散点图

chart.js使用学习——散点图相关推荐

最新文章

热门文章