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

我有一个用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>

变量配置={
类型：'bar'，
数据：{
数据集：[{
数据：['13'，'10'，'112'，'158'，'37']，
背景颜色：['rgb（43177,0,1）''rgb（174177,0,1）''rgb（255165,0,1）''rgb（255,47,0,1）''rgb（255,0,0,1）'
}],
标签：['AtéR$50'，'R$50-R$100'，'R$100-R$250'，'R$250-R$500'，'Acima de R$500']
},
选项：{
回答：错，
图例：{
显示：假
}
}
};
jQuery（文档）.ready（函数（）{
var ctx=jQuery（“#图表区”）[0]。getContext（'2d'）；
window.myPie=新图表（ctx，config）；
});

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

然而，当我点击移动设备中的任何一个条时，这些条就会消失

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

两件事：

1） 您提到图表的X轴上缺少一些标签。在ChartJS中，有一个选项可以将

autoSkip

默认设置为false。我相信这是真的，这将允许不跳过xAxis上的所有标签

2） 至于在手机上不能正确显示的颜色，你能试着去掉透明度，看看效果如何吗？我遇到了同样的问题，我去掉了透明度值，这对我很有效。此外，您还将responsive设置为

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,
           }
        }]
    }
};

---

谢谢！颜色是用十六进制表示法来解决的，而不是用不透明度的rgb来解决的，而X轴是通过减小它们的大小来解决的（这是它们适应空间的问题）。