Question

我有一个chart.js条形图在桌面上渲染得很好但在我的iPhone上图表条是黑色的，除非我将鼠标悬停在它们上面然后只有WAY条变为正确的颜色。代码：

<div class="col-sm">
            <canvas id="WayChart" width="300" height="300"></canvas> <!-- max-width="100%" -->
                <script>
                    var densityCanvas = document.getElementById("WayChart");

                    Chart.defaults.global.defaultFontSize = 18;
                    Chart.defaults.global.defaultFontColor='black';

                    var controlData = {
                      label: 'Control',
                      data: [5.0,4.2,5.6],
                      backgroundColor: 'rgba(144,18,179)',
                      borderWidth: 0,
                      yAxisID: "WAY Depth"
                    };

                    var wayData = {
                      label: 'WAY',
                      data: [5.3,2.5,2.6],
                      backgroundColor: 'rgba(0,166,104)',
                      borderWidth: 0,
                      yAxisID: "WAY Depth"
                    };

                    var daysData = {
                      labels: ["Day 0", "Day 28", "Day 56"],
                      datasets: [controlData, wayData],
                    };

                    var chartOptions = {
                      responsive:true,
                      scales: {
                        xAxes: [{
                          barPercentage: 1,
                          categoryPercentage: 0.5,
                            ticks: {
                                fontStyle:'bold'
                            }
                        }],
                        yAxes: [{
                          id: "WAY Depth",
                            scaleLabel:{
                                display:true,
                                labelString:'Depth (mm)',
                                fontStyle:'bold',
                            },
                          ticks: {
                              beginAtZero: true
                          }
                        }]
                      },

                        title:{
                            display:'true',
                            text:'Depth Measurements (mm)',
                            fontSize:18
                        }
                    };

                    var barChart = new Chart(WayChart, {
                      type: 'bar',
                      data: daysData,
                      options: chartOptions
                    });
                </script>
        </div>
    </div>

有什么想法吗？它在Chrome手机检查器窗口中渲染得很好，但在使用FF和Chrome浏览器的iPhone上却没有。

Answer 1

发布此内容后我立即看到了问题。 backgroundColor是使用rgba编写的，需要是rgb。总是小事......

条形图中的Chart.js颜色未显示

1 个答案: