Question

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

如果我使用正态图，则可以正确显示数据集，但是如果设置了堆叠轴，则渲染的第一项将显示奇怪的空白！

看看图表，一切都很好， stacked：false ，在 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);


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

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

在yAxes上注释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，因此即使其中之一为0，也可以更新数据以使存在B和{{1}}的数据。。https://jsfiddle.net/zqrp0w76/2/

使用chart.js的堆叠栏中的空白

1 个答案: