chartjs最新版好像有些功能实现不了 不知道是不会用还是什么问题 所以只要用的旧版
其中 Chart.js 版本为 v2.9.4 可以去网上搜索下载
例子:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="chart.min.js"></script>
</head>
<body>
<input type="button" value="切换数据" onclick="切换数据([41,52,36,25,41,25,35])">
<canvas id="myChart"></canvas>
<script>
//官方文档https://chartjs.bootcss.com/docs/
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar', //bar:柱状图 line:折线图 pie:环形图 horizontalBar:横向柱状图(最新的版本好像不支持)
data: {
labels: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
datasets: [{
label: '请求数', //鼠标悬停提示的汉字 key
data: [20,30,50,70,56,45,63,25,41,52,36,25,41,25,35], //鼠标悬停提示的数值
backgroundColor: ['rgba(93,162,255,0.2)','red','#0000ff'], //柱体颜色
borderColor: ['#4088FF','red'],//柱体边框颜色,数组 可以是一个 也可以是多个
borderWidth: 3, //柱体边框宽度
lineTension:0.5, //贝塞尔曲线张力 0为直线
pointRadius:12, //点的半径
pointHoverRadius:20, //鼠标悬浮时,点的半径
hoverBackgroundColor:'red', //鼠标悬浮时,原点的颜色
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
function 切换数据(array){
myChart.data.datasets[0].data=array
myChart.update();
}
</script>
</body>
</html>相关推荐
JavaScript原生JS实现html中checkbox复选框按Shift多选纯原生JavaScript代码 无需任何库整理后 可以直接拿来用的代码<input type='checkbox' name='cateid[]'> &l
原生JS,原生JavaScript写的开关按钮<style> td,table{border:1px solid #323841;} </style> <form method="get"
JavaScript 解析JSon解析 遍历obj=JSON.parse('{"id":"8","home":"beijing","uid&qu
原生JavaScript生成随机字母 JS取随机字符JavaScript取随机字母:方式有很多 我比较喜欢这一种 其中字符列表 和 要取的个数 改起来都比较方便<script> function 取随机字母(count){
JavaScript操作Select option 下拉组合框1、获取选中select的value和text,html<select id="mySelect"> <option value="1"&g
html中Select option原生JavaScript按照value值 或 按照文本 选择指定选项function select_value(id,value){//按照option的值来选择 selectdom=document.getElementById(id); option=se
JavaScript替换字符串 使用replace 替换字符串中的反斜杠JavaScript普通字符串替换把c替换成astr='abcd'; console.log(str); str=str.replace"c",&quo
JavaScript设置cookie与获取某个cookie的值JavaScript设置cookie和读取cookie都是使用 document.cookie 来实现JavaScript设置cookie方法:document.cookie="userna
JavaScript取随字母（指定长度且不重复）使用原生js生成n个不重复的随机字母方法<meta charset="UTF-8"> <script> function suijizimu(len){
html JavaScript给某元素添加子元素,dom给父元素添加子元素var drag = document.getElementById('zichuangkou'); /*取得某个元素*/ span1 = document.createElemen