Question

我正在使用chart.js中的条形图。除了酒吧，其他一切都很好。它们没有背景色，甚至没有默认颜色。我可以看到图表的顶部边框，当我将鼠标悬停在条上时，会看到带有值的工具提示。

这是我使用的代码：

        var mixedChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['< 30', '30 - 60', '61 - 90', '> 90'],
                datasets: [{
                        label: "sales",
                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
                        borderColor: 'rgba(0,0,0,1)',
                        borderWidth: '0',
                        data: [40, 60, 70, 70]
                    }
                ]
            },
            options: {
                legend: {
                    display: false,
                },
                barStrokeWidth : 10,
                scales: {
                    xAxes: [{
                        stacked: true,
                        gridLines: {
                            display: false ,
                            color: 'rgb(0, 0, 0, 0)'
                        },
                    }],
                    yAxes: [{
                        stacked: true,
                        gridLines: {
                            display: false,
                            color: 'rgb(0, 0, 0, 0)'
                        },
                        ticks: {
                            min: 0,
                            callback: function(value) {
                                return value + ',00'
                            }
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
            }
        });```

An idea how I can solve my problem?

Answer 1

这是基于先前注释的代码示例

var mixedChart = new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['< 30', '30 - 60', '61 - 90', '> 90'],
    datasets: [{
      label: "sales",
      borderWidth: '0',
      data: [40, 60, 70, 70],
      backgroundColor: ["#000000", "#000000", "#000000", "#ff0000", "#0000ff"],
    }]
  },
  options: {
    legend: {
      display: false,
    },
    barStrokeWidth: 10,
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          display: false,
          color: 'rgb(0, 0, 0, 0)'
        },
      }],
      yAxes: [{
        stacked: true,
        gridLines: {
          display: false,
          color: 'rgb(0, 0, 0, 0)'
        },
        ticks: {
          min: 0,
          callback: function(value) {
            return value + ',00'
          }
        }
      }]
    },
    elements: {
      line: {
        tension: 0
      }
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<canvas id="chart"></canvas>

我的chartjs图表的条形没有背景色

1 个答案: