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