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>