气温曲线
降水量柱状图
javascript
// 定义气温数据
const tempData = [{ month: '一月', temp: 8 },{ month: '二月', temp: 10 },{month: '三月', temp: 12 },{ month: '四月', temp: 16 },{ month: '五月', temp: 18 },{ month: '六月', temp: 20 },{ month: '七月', temp: 22 },{ month: '八月', temp: 20 },{ month: '九月', temp: 16 },{ month: '十月', temp: 12 },{ month: '十一月', temp: 10 },{ month: '十二月', temp: 8 }
];// 定义降水量数据
const precipData = [{ month: '一月', precip: 5 },{ month: '二月', precip: 7 },{ month: '三月', precip: 10 },{ month: '四月', precip: 15 },{ month: '五月', precip: 20 },{ month: '六月', precip: 25 },{ month: '七月', precip: 30 },{ month: '八月',precip: 25 },{ month: '九月', precip: 20 },{ month: '十月', precip: 15 },{ month: '十一月', precip: 10 },{ month: '十二月', precip: 5 }
];// 创建气温曲线
const tempChart = new Chart(document.getElementById('tempChart'),{type: 'line',data: {labels: tempData.map(d => d.month),datasets: [{label: '气温',data: tempData.map(d => d.temp),borderColor: 'red',borderWidth: 1}]},options: {scales: {yAxes: [{ticks: {beginAtZero: true,stepSize: 2}}]}}}
);// 创建降水量柱状图
const precipChart = new Chart(document.getElementById('precipChart'),{type: 'bar',data: {labels: precipData.map(d => d.month),datasets: [{label: '降水量',data: precipData.map(d => d.precip),backgroundColor: 'blue'}]},options: {scales: {yAxes: [{ticks: {beginAtZero: true,stepSize: 5}}]}}}
);
css
/ 定义图表样式 /
.container {display: flex;justify-content: space-around;
}.chart {width: 400px;height: 300px;
}canvas {width: 100%;height: 100%;
}
