数据可视化
文章平均质量分 85
LIMI_伞梦
这个作者很懒,什么都没留下…
展开
-
数据可视化清新版【chart.js】学习笔记14.0—数据更新
数据可视化展示除了静态数据的展示,还有动态数据的实时更新。博主通过阅读chart.js的api,总结了以下两种方法:方法1、直接更新图表的数据集this.mydata_1=[7,22,18,24,10,30];//获取新数据this.myChart.data.datasets[0].data = this.mydata_1;//数据集数据更新this.myChart.update();//图表更新方法2、清除原图表,生成新图表this.myChart.destroy();//原图表清除thi原创 2021-01-13 12:13:10 · 853 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记13.0—图表配置
1、动画(animations)options: { animation: { duration:1000,//动画所需时间,毫秒数 easing:'easeOutQuart',//动画趋势,比如线性 numSteps:10000,//动画帧数 animateRotate:true,//图表将使用旋转动画进行动画处理,环形图,饼图,极地图专属 animateScale:false,//使图表从中心向外缩放。环形图,饼图,极地图专属 onProgress(animation) {/原创 2021-01-12 16:29:02 · 815 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记12.0—面积图表
面积图是相对于fill配置形成的,而折线图和雷达图都支持数据集对象上的fill选项,该选项可用于创建两个数据集之间的区域或数据集与边界之间的区域,fill存在以下设置情况:|模式类型值绝对数据集索引Number1, 2, 3, …相对数据集索引String‘-1’, ‘-2’, ‘+1’, …边界String‘start’, ‘end’, ‘origin’配置状态Booleanfalse,true官方文档:https://www.chart.原创 2021-01-11 11:24:49 · 519 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记11.0—混合图表
混合图表类型使用Chart.js,可以创建混合图表,这些图表是两个或多个不同图表类型的组合。常见的是一个柱形图和一个折线图进行联动混合,创建混合图表始于基本图表的初始化。样例代码let ctx = document.getElementById(“myChart9”);let myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orang原创 2021-01-11 09:23:48 · 687 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记10.0—离散图(Scatter Chart)
Scatter Chart——(离散图)散点图基于基本折线图,x 轴更改为线性轴。要使用散点图,数据必须作为包含 X 和 Y 属性的对象传递。下面的例子创建了一个 3 点的散点图。官方文档:https://www.chartjs.org/docs/latest/charts/scatter.html用法示例var myBubbleChart = new Chart(ctx, {type: ‘scatter’,data: data,options: options});图表属性(博主这原创 2021-01-08 16:55:45 · 1017 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记9.0—气泡图(Bubble Chart)
Bubble Chart——(气泡图)气泡图用于同时显示三维数据。气泡的位置由前两个维度以及相应的水平和垂直轴线确定。第三个维度由单个气泡的大小来表示。官方文档:https://www.chartjs.org/docs/latest/charts/bar.html用法示例var myBubbleChart = new Chart(ctx, {type: ‘bubble’,data: data,options: options});图表属性(博主这边只列举看出了比较常用和设置影响明显的原创 2021-01-08 15:17:23 · 2268 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area——(极地图)极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异。当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表。官方文档:https://www.chartjs.org/docs/latest/charts/polar.html示例用法new Chart(ctx, {data: data,type: “polarArea”,options: options});图表属性(博主这边只列举看出了比较常用和原创 2021-01-08 12:11:57 · 1717 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记7.0—环形图(Doughnut )
Doughnut ——(环形图)饼图和环形图表可能是最常用的图表。它们被分成不同的部分,每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类,但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0,环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名,其他是完全一样的。这里主要讲的是饼图。官方文档:https://www.chartjs.org原创 2021-01-08 11:02:40 · 1619 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记6.0—饼图(Pie)
Pie——(饼图)饼图和环形图表可能是最常用的图表。它们被分成不同的部分,每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类,但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0,环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名,其他是完全一样的。这里主要讲的是饼图。官方文档:https://www.chartjs.org/docs/l原创 2021-01-08 10:56:17 · 1870 阅读 · 1 评论 -
数据可视化清新版【chart.js】学习笔记5.0—雷达图(Radar)
Radar——(雷达图)雷达图是显示多个数据点和它们之间的差异的一种方式,通常用于比较两个或更多不同数据集的点。官方文档:https://www.chartjs.org/docs/latest/charts/radar.html用法示例var myRadarChart = new Chart(ctx, {type: ‘radar’,data: data,options: options});数据集属性(博主这边只列举看出了比较常用和设置影响明显的属性)属性描述类型默认原创 2021-01-07 17:13:00 · 1948 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记4.0—柱状图(Bar)
Bar——(柱状图/条形图)柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势,并排比较多个数据集。官方文档:https://www.chartjs.org/docs/latest/charts/bar.html#barthickness用法示例var myBarChart = new Chart(ctx, {type: ‘bar’,data: data,options: options});数据集属性(博主这边只列举看出了比较常用和设置影响明显的属性)属性原创 2021-01-07 15:12:18 · 3699 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记3.0—折线图(Line)
line——(折线图/曲线图)折线图是在一条线上绘制数据点的方法。通常,它用于显示趋势数据或两个数据集的比较。官方文档https://www.chartjs.org/docs/latest/charts/line.html用法示例var myLineChart = new Chart(ctx, {type: ‘line’,data: data,options: options});数据集属性(博主这边只列举看出了比较常用和设置影响明显的属性)属性描述类型默认值原创 2021-01-07 11:03:14 · 1535 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记2.0—项目引入
博主是在vue-cli3.0项目中配合使用chart.js的,接下来就项目概括一下在项目里安装,也可以参考官网文档:项目中安装获取Chart.js方式步骤步骤1、在项目cmd命令行中运行代码:npm install chart.js --save-dev步骤2、在项目main.js文件中引入进行使用,相关代码:import Vue from 'vue'import App from './App.vue'import router from './router'import store fro原创 2021-01-07 10:05:52 · 710 阅读 · 0 评论 -
数据可视化清新版【chart.js】学习笔记1.0—介绍
前言:我们平时在写项目的时候,尤其是在做数据展示的时候,设计一个清晰可观的数据展示页是十分重要的。博主接触使用过一些数据可视化插件,比如echart.js , chart.js , Antv-G2。而这里主要是博主在进行chart.js学习啥时候的笔记。chart.js一款适用于设计人员和开发人员的简单而灵活的JavaScript图表,官网:https://www.chartjs.org/gitHub项目地址:https://github.com/chartjs/Chart.js官方文档:htt原创 2021-01-07 10:03:07 · 573 阅读 · 0 评论