图表的文字替代写法
对于html的img标签，有alt属性，作用是在图片加载不出来的时候，显示alt的文字值。
同样，因为Chart.js的图表都是基于canvas标签的，所以当canvas加载失败，也需要替代文字，写法如下：
<canvas id="graph" width="400" height="100"> <p>替代文字</p> </canvas>
用贴图作为图表背景
效果如图：
代码：
var img = new Image(); img.src = 'bg.png'; img.onload = function() { var ctx = document.getElementById('myChart2').getContext('2d'); var fillPattern = ctx.createPattern(img, 'repeat'); var chart = new Chart(ctx, { type: 'line', data: { labels: ['1', '2', '3','4','5'], datasets: [{ data: [10, 20, 30,40,50], backgroundColor: fillPattern }] } }); };
修改字体、字色、字号
用下面这条语句：
Chart.defaults.global.defaultFontColor = 'red';
这是全局设置字色。
defaultFontColor:字色
defaultFontFamily:字体
defaultFontSize:字号
defaultFontStyle:字样式
也可以在options函数里面进行局部设置：
options: { legend: { labels: { // 设置该表标签的字色 fontColor: 'black' } } }
对标签的修改与设置
应该在options函数里面设置：
options: { legend: { // 这里设置 } }
legend里面的参数：
| 参数名 | 类型 | 默认值 | 描述 |
display |
boolean |
true |
是否标签显示 |
position |
string |
'top' |
标签的位置。可选值：‘top’、‘bottom’、‘left’、‘right’ |
align |
string |
'center' |
标签的对齐方式。‘start’、‘center’、‘end’ |
onClick |
function |
点击事件的回调函数 | |
onHover |
function |
鼠标放置事件的回调函数 |
onLeave |
function |
鼠标离开事件的回调函数 | |
reverse |
boolean |
false |
标签显示的排序方式 |
labels |
object |
这是个对象，里面还有许多参数，不再展开 |
onLeave |
function |
鼠标离开事件的回调函数 | |
reverse |
boolean |
false |
标签显示的排序方式 |
labels |
object |
这是个对象，里面还有许多参数，不再展开 |
对图表标题的修改与设置
应该在options函数里面设置：
options: { title: { // 这里设置 } }
| 名称 | 类型 | 默认值 | 描述 |
display |
boolean |
false |
是否显示表标题 |
position |
string |
'top' |
表标题的位置 |
fontSize |
number |
12 |
字号 |
fontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
字体 |
fontColor |
Color |
'#666' |
颜色 |
fontStyle |
string |
'bold' |
样式 |
padding |
number |
10 |
padding距离 |
lineHeight |
number|string |
1.2 |
行高 |
text |
string|string[] |
'' |
title文字内容 |
销毁图表
myLineChart.destroy();
更新图表
在图表的datasets改变后，重新渲染图表。
myLineChart.update();
可以用此来实现图表的动态更新功能，见下面的代码：
var ctx = $('#myChart3'); var myChart3 = new Chart(ctx, { type: 'line', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [100, 110, 120, 70, 140, 10], backgroundColor: [ '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)' ], borderColor:'black', borderWidth: 2 }] }, options: { title: { display: true, text: '动态更新图' }, } }); function sleep(ms){//时间延迟函数 return new Promise(resolve =>setTimeout(resolve,ms)) } async function test() { while(1){ await sleep(1000) myChart3.data.datasets[0].data.shift(); myChart3.update(); myChart3.data.datasets[0].data.push(Math.random()*100); myChart3.update(); } } test()
如下图：
