如何固定堆叠的对数条形图值以适合网格

时间:2019-01-07 14:32:48

标签: javascript chart.js

我有一个未堆叠的对数水平条形图,我需要这张图的副本,其中X轴和Y轴都堆叠了(同时)。问题是当我更改轴时(https://i.imgur.com/LH6YTy0.png)-图片显示了这些值,而底部的网格显示的数据不适合网格的值-是那个一个错误还是我忽略了什么?

代码是一个简单的图表声明,我现在正在使用4个数据集,每个数据集如下:

{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}

我认为数据集或将它们分配给图表的方式都没有错,因此堆叠的轴必定有问题。

我尝试过调整大小并仅更改一个要堆叠的轴,这也是可行的,但是我需要将两个轴堆叠的原因在于这样它们不会相互重叠,因此查看起来更容易并读取数据。

let myChart = new Chart(ctx2, {
    type: 'horizontalBar',
    data: {
        labels: [],
        datasets: [],
    },
    options: {
    labels:'50px',
    borderWidth:1,
        maintainAspectRatio: false, 
        scales: {
        xAxes: [{
        stacked:true,
        barPercentage: 1,
            ticks:{
                autoSkip: false,
                pointLabelFontSize: '20px'
            },
        }],
        yAxes: [{ 
      stacked: true,
      barPercentage: 0.4,
            ticks:{
            fontColor: 'rgb(0, 0, 0)'},
            fontSize:500,
        }],
        }
    }
});

预期结果将是这些值适合网格中的值并且条形图停留在画布上。

1 个答案:

答案 0 :(得分:1)

发现了问题,在我的项目中,数据集对象中的数据是一个字符串数组(类似于[“ 1”,“ 2”,“ 3”]之类的东西)。在解析了数据数组中的元素之后,堆叠的对数条形图可以正常工作。有趣的是,我使用chart.js创建了许多具有字符串数据数组的图表,并且我只在类型设置为对数且两个轴都设置为堆叠的图表中遇到了这个问题。