javascript - Chart.js - 移动设备中的黑条颜色

Question

我有一个用 Chart.js 制作的条形图，通过执行以下操作，它在我的网站中完美运行:

<canvas id='chart-area'></canvas>

<script type='text/javascript'>
    var config = {
        type: 'bar',
        data: {
            datasets: [{
                data: ['13', '10', '112', '158', '37'],
                backgroundColor: ['rgb(43, 177, 0, 1)', 'rgb(174,177, 0, 1)', 'rgb(255,165, 0, 1)', 'rgb(255,47, 0, 1)', 'rgb(255,0, 0, 1)']
            }],
            labels: ['Até R$ 50', 'R$ 50 - R$ 100', 'R$ 100 - R$ 250', 'R$ 250 - R$ 500', 'Acima de R$ 500']
        },
        options: {
            responsive: false,
            legend: {
                display: false
            }
        }
    };

    jQuery(document).ready(function() {
        var ctx = jQuery('#chart-area')[0].getContext('2d');
        window.myPie = new Chart(ctx, config);
    });
</script>

但是，对于移动设备，条形颜色全是黑色，并且缺少一些图例:

不过，当我单击移动设备中的任何栏时，这些栏就会消失。

对可能导致此行为的我的代码有什么建议吗？

Answer 1

几件事:

1) 您提到图表的 x 轴上缺少一些标签。在 ChartJS 中，有一个选项可以将 autoSkip 设置为 false，默认情况下这是 true，我相信这将允许 xAxis 上的所有标签都不会被跳过。

2)至于颜色在移动设备上无法正确显示的问题，您可以尝试去掉透明度并看看是否有效吗？我遇到了同样的问题，我摆脱了透明度值，它对我有用。另外，您已将响应式设置为 false，尝试将其设置为 true 并查看是否可以解决颜色问题。

var config = {
    type: 'bar',
    data: {
        datasets: [{
            data: ['13', '10', '112', '158', '37'],
            backgroundColor: ['rgb(43, 177, 0, 1)', 'rgb(174,177, 0, 1)', 'rgb(255,165, 0, 1)', 'rgb(255,47, 0, 1)', 'rgb(255,0, 0, 1)']
        }],
        labels: ['Até R$ 50', 'R$ 50 - R$ 100', 'R$ 100 - R$ 250', 'R$ 250 - R$ 500', 'Acima de R$ 500']
    },
    options: {
        responsive: false,
        legend: {
            display: false
        },
        xAxis: [{
          ticks: {
              autoSkip: false,
           }
        }]
    }
};