chart.js参数设置

Chart.defaults.global = {
    responsive: true, // 图表是否响应式
    maintainAspectRatio: false, // 是否保持宽高比
    animation: {
        duration: 1000, // 动画持续时间（毫秒）
        easing: 'easeOutQuart' // 动画缓动效果
    },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true // Y轴从0开始
            }
        }]
    }
};

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar', // 图表类型
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1.0)',
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Chart.js Bar Chart'
        },
        legend: {
            position: 'bottom' // 图例位置
        },
        tooltips: {
            enabled: true // 是否显示工具提示
        }
    }
});

// 确保数据源不为空
if (myChart.data.datasets[0].data.length === 0) {
    console.error('No data to display');
}

// 检查数据格式
console.log(myChart.data);

/* 确保容器具有明确的宽度和高度 */
#myChart {
    width: 100%;
    height: 400px;
}

// 启用响应式
Chart.defaults.global.responsive = true;