时间戳

首页 > 解决方案 > 使用 chart.js 堆积条形图中的空白

javascript - 使用 chart.js 堆积条形图中的空白

问题描述

我正在使用 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/

标签： javascriptchartschart.jsstacked-chart

解决方案

您同时拥有xAxes并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和的数据B，即使其中一个为 0。https://jsfiddle.net/zqrp0w76/2/

推荐阅读