使用 chart.js 在堆叠条中显示白色 Space

Question

我正在使用 chart.js 版本 2.7.2 绘制一些图表。该图表是条形图，我使用时间轴来设置数据集点。

如果我使用普通图形，数据集会正确显示，但如果我设置堆叠轴，在第一项渲染显示奇怪的白色 space!

看图表，stacked:false没问题，stacked:true有一个奇怪的白色space 在第一个酒吧！有没有办法去掉那个白色的space？谢谢

function newDate(days) {
 return moment().add(days, 'd').toDate();
}

const lineData = {
  labels: null,
  datasets: 
  [
    {
      label: 'A',
      fill: false,
      backgroundColor: "hsl(50, 50%, 80%)",
      data: 
      [
        {
          x: newDate(1),
          y: 12
        },
        {
          x: newDate(2),
          y: 15
        }, 
      ],
    },
    {
      label: 'B',
      fill: false,
      backgroundColor: "hsl(250, 50%, 80%)",
      data: 
      [
        {
          x: newDate(0),
          y: 23
        },
        {
          x: newDate(2),
          y: 34
        },
        {
          x: newDate(3),
          y: 45
        },
      ]
    }
  ],
}

const lineOptions = {
type: 'bar',
 data: lineData,
 options: 
 {
  title: 
  {
 display: true,
  text: 'STACKED TRUE'
},
 legend: 
 {
     display: true,
 },
 hover: 
 {
  mode: 'nearest'
 },
 fill: false,
 responsive: true,
 scales: 
 {
 xAxes: 
 [
   {
    stacked: true,
    display: true,
    ticks: 
    {       
     beginAtZero: false,
    },
    scaleLabel: 
    {
     display: true,
     labelString: "Day",
    },
    barThickness: 15,
    type: 'time',
    distribution: 'linear',
    bounds: 'ticks',
    time: 
    {
     unit: 'day',
     unitStepSize: 1,
     displayFormats: 
     {
      'day': 'DD/MM',
     },
     tooltipFormat: 'DD/MM',
    }
   }
  ],
  yAxes: 
  [
   {
    ticks: 
    {
     beginAtZero: true,
    },
    display: true,
    stacked: true,
    scaleLabel: 
    {
     display: true,
     labelString: "Items",
    }
   }
  ]
 },
 tooltips: 
 {
  mode: 'x',
 },
}
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);


const lineOptions2 = {
 type: 'bar',
 data: lineData,
 options: 
 {
  title: 
  {
   display: true,
    text: 'STACKED FALSE'
  },
 legend: 
 {
  display: true
 },
 hover: 
 {
  mode: 'nearest'
 },
 fill: false,
 responsive: true,
 scales: 
 {
  xAxes: 
  [
   {
    //stacked: true,
    display: true,
    ticks: 
    {       
     beginAtZero: false,
    },
    scaleLabel: 
    {
     display: true,
     labelString: "Day",
    },
    barThickness: 15,
    type: 'time',
    distribution: 'linear',
    bounds: 'ticks',
    time: 
    {
     unit: 'day',
     unitStepSize: 1,
     displayFormats: 
     {
      'day': 'DD/MM',
     },
     tooltipFormat: 'DD/MM',
    }
   }
  ],
  yAxes: 
  [
   {
    ticks: 
    {
     beginAtZero: true,
    },
    display: true,
    //stacked: true,
    scaleLabel: 
    {
     display: true,
     labelString: "Items",
    }
   }
  ]
 },
 tooltips: 
 {
  mode: 'x',
 },
}
}
const chart2 = new Chart(document.getElementById("chart2").getContext("2d"), lineOptions2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<body>
    <canvas id="chart" width="600" height="400"></canvas>
    <canvas id="chart2" width="600" height="400"></canvas>
</body>

https://jsfiddle.net/tgfy6q82/42/

Answer 1

您将 xAxes 和 yAxes 都设置为 stacked:true。

在 yAxes 上注释掉 stacked:true 就可以了；

function newDate(days) {
    return moment().add(days, 'd').toDate();
}

const lineData = {
    labels: null,
    datasets: [{
            label: 'A',
            fill: false,
            backgroundColor: "hsl(50, 50%, 80%)",
            data: [{
                    x: newDate(1),
                    y: 12
                },
                {
                    x: newDate(2),
                    y: 15
                },
            ],
        },
        {
            label: 'B',
            fill: false,
            backgroundColor: "hsl(250, 50%, 80%)",
            data: [{
                    x: newDate(0),
                    y: 23
                },
                {
                    x: newDate(2),
                    y: 34
                },
                {
                    x: newDate(3),
                    y: 45
                },
            ]
        }
    ],
}

const lineOptions = {
    type: 'bar',
    data: lineData,
    options: {
        title: {
            display: true,
            text: 'STACKED TRUE'
        },
        legend: {
            display: true,
        },
        hover: {
            mode: 'nearest'
        },
        fill: false,
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
                display: true,
                ticks: {
                    beginAtZero: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: "Day",
                },
                barThickness: 15,
                type: 'time',
                distribution: 'linear',
                bounds: 'ticks',
                time: {
                    unit: 'day',
                    unitStepSize: 1,
                    displayFormats: {
                        'day': 'DD/MM',
                    },
                    tooltipFormat: 'DD/MM',
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                },
                display: true,
                // stacked: true,
                scaleLabel: {
                    display: true,
                    labelString: "Items",
                }
            }]
        },
        tooltips: {
            mode: 'x',
        },
    }
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<body>
    <canvas id="chart" width="600" height="400"></canvas>
</body>

或者，由于设置 yAxes stacked:true 应该是有意的，因此可以更新数据，以便存在 A 和 B 的数据，即使其中之一为 0。https://jsfiddle.net/zqrp0w76/2/

使用 chart.js 在堆叠条中显示白色 Space

White Space in stacked bar using chart.js

javascript

charts

chart.js

stacked-chart