线形图样式总览
基本写法
首先在< 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 }] } } });
