js导入数组实现柱状图

使用Chart.js绘制柱状图

Chart.js是一个流行的JavaScript库，用于创建各种图表类型。要绘制柱状图，需要先引入Chart.js库。

在HTML文件中添加Chart.js的CDN链接：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

准备数据数组

准备要展示的数据数组，通常包含标签数组和数值数组：

const labels = ['January', 'February', 'March', 'April', 'May'];
const data = [65, 59, 80, 81, 56];

创建画布元素

在HTML中添加一个canvas元素作为图表的容器：

<canvas id="myChart"></canvas>

初始化图表

使用JavaScript代码初始化柱状图：

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Monthly Sales',
            data: data,
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

自定义图表样式

可以通过修改配置对象来自定义图表外观：

backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)'
],
borderColor: [
    'rgba(255, 99, 132, 1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)'
],

动态更新数据

可以通过修改数据数组并调用update方法实时更新图表：

myChart.data.datasets[0].data = [10, 20, 30, 40, 50];
myChart.update();

响应式设计

确保图表在不同屏幕尺寸下正常显示：

options: {
    responsive: true,
    maintainAspectRatio: false
}