chart.js - 为什么 Chart.js 呈现时髦？

Question

使用 Chart.js 渲染图表时，输出看起来非常奇怪。

• 左侧只有一个标签
• 弹出框很有趣
• 底部图例有重叠标签
• 悬停时颜色闪烁

https://codepen.io/freakypie/pen/JjYPwjp

    "labels": [
        "Wed Apr 8"
    ],
    "datasets": [{
            "label": "#3",
            "data": [
                33756
            ],
            "backgroundColor": "hsl(195, 70%, 20%)",
        },
        {
            "label": "#4",
            "data": [
                41100
            ],
            "backgroundColor": "hsl(277.5, 70%, 20%)",
        },
        {
            "label": "#5",
            "data": [
                56430
            ],
            "backgroundColor": "hsl(30, 70%, 20%)",
        },
    ]
};

var options = {
    animation: false,
    responsive: true,
    maintainAspectRatio: false,
    legend: {
        position: 'bottom',
    },
};

new Chart('chart', {
    type: 'bar',
    options: options,
    data: data
});

标签： chart.js

Answer 1

看来这是与浏览器相关的问题。我们也许可以应用一些特定于浏览器的 CSS 来解决这个问题。