Chart.js-线形图分析（参数分析+例图）
2024-04-05 02:12:30
Chart.js-线形图分析（参数分析+例图）
- 线形图样式总览
- 基本写法
- 参数解析
- 线形图1 - 普通线形图（直线、曲线、虚线）
- 线形图2 - 普通线面图
- 线形图3 - 步进线（像极了哈夫曼编码）
- 线形图4 - 点状线
- 线形图5 - 线形叠加图
线形图样式总览
基本写法
首先在< script >标签里面引入chart.js：
<script src="chart.js/Chart.js"></script>
然后创建一个画布：
<canvas id="myChart" width="400" height="400"></canvas>
最后写js代码：
var ctx = $('#myChart');
var myChart = new Chart(ctx, {type: 'line',data: {labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],datasets: [{label: '# of 战力',data: [10, 11, 12, 14, 7, 1],backgroundColor: ['rgba(255, 99, 132, 0.2)'],borderColor: 'rgba(0, 0, 0, 0.2)',borderWidth: 1, }]},options: {title: {display: true,text: '线形图2 - 普通线面图'}}
});
画出的柱状图如下图：
参数解析
【注意】以下都是写入在datasets中的参数：
| 参数名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
backgroundColor
|
Color
|
背景色。如果值为Array，只取Array[0] |
'rgba(0, 0, 0, 0.1)'
|
borderColor
|
Color
|
边框色。可取Array类型的Color |
'rgba(0, 0, 0, 0.1)'
|
borderDash
|
number[]
|
设置虚线。若设为[1,3],代表以1和3作为缺失绘制虚线 |
[]
|
borderWidth
|
number
|
略 |
3
|
cubicInterpolationMode
|
string
|
绘制曲线的方法。可选值为default和monotone。两个参数绘制曲线的算法不同
|
'default'
|
fill
|
boolean|string
|
是否填充曲线底部 |
true
|
hoverBackgroundColor
|
Color
|
略 |
undefined
|
hoverBorderCapStyle
|
string
|
略 |
undefined
|
hoverBorderColor
|
Color
|
略 |
undefined
|
hoverBorderDash
|
number[]
|
略 |
undefined
|
hoverBorderDashOffset
|
number
|
略 |
undefined
|
hoverBorderJoinStyle
|
string
|
略 |
undefined
|
hoverBorderWidth
|
number
|
略 |
undefined
|
label
|
string
|
标签，图例和工具提示中的数据集标签。 |
''
|
lineTension
|
number
|
曲线的平滑度。为0时，绘制直线 |
0.4
|
pointBackgroundColor
|
Color
|
略 |
'rgba(0, 0, 0, 0.1)'
|
pointBorderColor
|
Color
|
略 |
'rgba(0, 0, 0, 0.1)'
|
pointBorderWidth
|
number
|
略 |
1
|
pointHitRadius
|
number
|
略 |
1
|
pointHoverBackgroundColor
|
Color
|
略 |
undefined
|
pointHoverBorderColor
|
Color
|
略 |
undefined
|
pointHoverBorderWidth
|
number
|
略 |
1
|
pointHoverRadius
|
number
|
略 |
4
|
pointRadius
|
number
|
略 |
3
|
pointRotation
|
number
|
略 |
0
|
pointStyle
|
string|Image
|
点的类型。可选值有：'circle'、 'cross'、 'crossRot'、 'dash'、 'line'、 'rect'、 'rectRounded'、 'rectRot'、 'star'、 'triangle' |
'circle'
|
showLine
|
boolean
|
是否显示曲线。否则仅显示点 |
undefined
|
spanGaps
|
boolean
|
如果有缺失的点，是否选择中断画图 |
undefined
|
steppedLine
|
boolean|string
|
步进线。可选值有：false、 true、 'before'、 'after'、 'middle' |
false
|
线形图1 - 普通线形图（直线、曲线、虚线）
var ctx1 = $('#myChart1');
var myChart = new Chart(ctx1, {type: 'line',data: {labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],datasets: [{label: '# of 战力',data: [100, 110, 120, 70, 140, 10],backgroundColor: 'rgba(54, 162, 235, 0.2)',borderColor:'rgba(153, 102, 255, 0.5)',borderWidth: 2,fill:false},{label: '# of 年龄',data: [24, 38, 55, 93, 82, 23],backgroundColor: 'rgba(54, 162, 235, 0.2)',borderColor:'red',borderWidth: 2,lineTension:0,fill:false},{label: '# of 相貌',data: [100, 10, 80, 3, 5, 4],backgroundColor: 'rgba(54, 162, 235, 0.2)',borderColor:'rgba(255, 206, 86, 0.9)',borderWidth: 2,fill:false,borderDash:[5]}]},options: {title: {display: true,text: '线形图1 - 普通线形图（直线、曲线、虚线）'}}
});
线形图2 - 普通线面图
var ctx2 = $('#myChart2');
var myChart = new Chart(ctx2, {type: 'line',data: {labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],datasets: [{label: '# of 战力',data: [10, 11, 12, 14, 7, 1],backgroundColor: ['rgba(255, 99, 132, 0.2)'],borderColor: 'rgba(0, 0, 0, 0.2)',borderWidth: 1, }]},options: {title: {display: true,text: '线形图2 - 普通线面图'}}
});
线形图3 - 步进线（像极了哈夫曼编码）
var ctx3 = $('#myChart3');
var myChart = new Chart(ctx3, {type: 'line',data: {labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],datasets: [{label: '# of 战力',data: [10, 11, 12, 14, 7, 1],backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1, steppedLine:'true'},{label: '# of 才华',data: [2, 4, 2, 4, 2, 4],type:'line',backgroundColor:'rgba(0, 0, 0, 0.1)',borderColor:'rgba(0, 99, 132, 1)',steppedLine:'middle'}]},options: {title: {display: true,text: '线形图3 - 步进线（像极了哈夫曼编码）'}}
});
线形图4 - 点状线
var ctx4 = $('#myChart4');
var myChart = new Chart(ctx4, {type: 'line',data: {labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],datasets: [{label: '# of 战力',data: [10, 11, 12, 14, 7, 1],borderColor: 'green',borderWidth: 1, showLine:false},{label: '# of Votes',data: [12, 19, 3, 5, 2, 3],type:'line',backgroundColor:'rgba(0, 0, 0, 0.1)',borderColor:'rgba(255, 99, 132, 1)',showLine:false,pointStyle:'rect'}]},options: {title: {display: true,text: '线形图4 - 点状线'}}
});
线形图5 - 线形叠加图
var ctx5 = $('#myChart5');
var myChart = new Chart(ctx5, {type: 'line',data: {labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],datasets: [{label: '# of 战力',data: [10, 11, 12, 14, 7, 1],backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)']},{label: '# of Votes',data: [12, 1, 3, 5, 2, 3],type:'line',backgroundColor:'rgba(54, 162, 235, 0.2)',borderColor:'rgba(75, 192, 192, 1)',}]},options: {title: {display: true,text: '线形图5 - 线形叠加图'},scales: {xAxes: [{stacked: true,}],yAxes: [{stacked: true}]}}
});
Chart.js-线形图分析（参数分析+例图）相关推荐
- 前端折线图中背景,Chart.js折线图设置背景颜色
I'm working with Chart.js and want to convert a line chart to a PNG. The problem is that the image a ...
- js逆向-喜马拉雅登陆参数分析
声明 本文仅供参考学习,请勿用于其他途径,违者后果自负! 前言 目标网站:喜马拉雅 接口信息:登陆包 参数生成逻辑 抓包发现,疑似加密的参数有nonce.password.signature. 搜索一 ...
- chart.js雷达图不显示刻度标签_Matplotlib从入门再也不放弃
本文使用 Zhihu On VSCode 创作并发布 display: false date: 2020-06-13 title: 掌握这几个概念就可以延迟放弃matplotlib作图 categor ...
- Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用 常用的 图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...
- html chart标签,用 Chart.js 画扇形图并显示标签
chart.js 扇形图 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = ...
- chart.js 图表刷新_Chart.js的花式，响应式图表
chart.js 图表刷新 Data is all around us. While search engines and other applications work most optimally ...
- Chart.js-雷达图分析（参数分析+例图）
Chart.js-雷达图分析(参数分析+例图) 雷达图样式总览 基本写法 参数解析 雷达图样式总览 基本写法 首先在< script >标签里面引入chart.js: <script ...
- Chart.js-极区图分析（参数分析+例图）
Chart.js-极区图分析(参数分析+例图) 极区图样式总览 基本写法 参数解析 极区图1 - 普通极区图 极区图样式总览 基本写法 首先在< script >标签里面引入chart.j ...
- Chart.js-饼状图分析（参数分析+例图）
Chart.js-饼状图分析(参数分析+例图) 饼状图样式总览 基本写法 参数解析 饼状图2 - 中空同心圆 饼状图3 - 多同心圆 饼状图样式总览 基本写法 首先在< script >标 ...
最新文章
- python逆序打印出各位数字_Python练习题 024：求位数及逆序打印
- 淘宝用了mysql,您呢？
- 从未在一起更让人遗憾_擦肩而过的遗憾，远离家乡逆行武汉，盘点《在一起》那些泪目瞬间...
- aws高额账单_取消堆放以提高延迟并减少AWS账单
- 用随机梯度下降来优化人生
- Django - rest - framework - 下
- 计算机网络第五次笔记
- VC++ MFC 经典教程 – 基础篇
- pytorch时空数据处理4——图像转文本/字幕Image-Captionning（二）
- AD怎么设置相同网络的线宽
- linux服务器运维工程师怎么样,怎样才算合格的运维工程师？linux运维技术
- java 环绕通知_SpringAOP四种通知类型+环绕通知
- nginx直接打印输出_ngnix配置打印请求入参和出参消息
- 五大列级庄_波尔多1855年评定的列级名庄1-5级各有哪些？哪个产区的列级庄最多？...
- keydown,keypress,keyup三者之间的区别：
- 线程wait和notify方法
- 用计算机来谈生僻字,语义搜索及框计算：从百度查生僻字谈起
- 浙江不老仙妻，教去皱
- Apple watch 回收如何选择
- 为何家会伤人：2020-10-15早上