<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<!-- <script src="./js/Chart.js"></script>-->
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [20, 50, 100, 75, 25, 0],
label: 'Left dataset',
backgroundColor:'rgba(255, 99, 132, 0)',
borderColor:'#ED0000',
borderWidth:2,
// 将数据集绑定到左侧的y轴
yAxisID: 'left-y-axis'
}, {
data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
label: 'Right dataset',
backgroundColor:'rgba(255, 99, 132, 0)',
borderColor:'#588DD6',
borderWidth:2,
// 将数据及绑定到右侧的y轴
yAxisID: 'right-y-axis',
}],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
options: {
title: {
display: true,
text: "title",
fontColor:'#DA291C',
},
scales: {
yAxes: [{
id: 'left-y-axis',
type: 'linear',
position: 'left'
}, {
id: 'right-y-axis',
type: 'linear',
position: 'right'
}]
}
}
});
</script>
</html>