ChartJS 需要增加水平条形图中Y轴的长度

c6ubokkw 于 2023-05-22 发布在 Chart.js

关注(0)|答案(1)|浏览(167)

我想在水平图表中将画布中两条线之间的间距固定为一定的数字。

我期待的是如下所示：

我得到的是：

随着行数的增加，刻度之间差距越来越小，如何固定到一定的数量？
我曾尝试过这种后装来改变刻度高度，但它没有工作：

var labels = [];
for (var i = 1; i <= 500; i++) {
    labels.push('Category ' + i);
}

var data1 = [];
for (var i = 1; i <= 500; i++) {
  data1.push(i * 10);
}

var data2 = [];
for (var i = 1; i <= 500; i++) {
  data2.push(i * 3);
}

const data = {
        'labels': labels,
        datasets: [{
            label: 'Bar 1',
            data: data1,
            backgroundColor: 'rgba(100, 149, 237, 0.25)',
            barPercentage: 1, // Adjust the bar width for Bar 1
            categoryPercentage: 1 // Adjust the spacing between categories
        }, {
            label: 'Bar 2',
            data: data2,
            backgroundColor: 'rgb(100, 149, 237,0.8)',
            barPercentage: 0.8, // Adjust the bar width for Bar 2
            categoryPercentage: -1 // Adjust the spacing between categories
        }]
    };
    
const ctx = document.getElementById('myChart');

const config = {
  type: 'bar',
  data: data,
  options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y', // Set the chart to display horizontal bars
        scales: {
          x: {
                beginAtZero: true,
                position: 'top' 
            },
            y: {
              beginAtZero: true,
              afterFit:function(scale){
                debugger;
              }
            }
        },
        plugins: {
            legend: {
                display: true
            },
            layout: {
            padding: {
                left: 20,
                right: 20
            }
        }
        }
    }
};

new Chart(ctx, config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

chart.js

来源：https://stackoverflow.com/questions/76294072/need-to-increase-the-length-of-y-axis-in-a-horizontal-bar-chart

1条答案

按热度按时间

ve7v8dk21#

您可以根据图表包含的条形图的数量动态定义canvas的高度。

const canvas = document.getElementById('myChart');
const headerHeight = 75;
canvas.height = barCount * 25 + headerHeight;

请查看您修改后的代码，看看它是如何工作的。

const barCount = 500;

var labels = [];
for (var i = 1; i <= barCount; i++) {
  labels.push('Category ' + i);
}

var data1 = [];
for (var i = 1; i <= barCount; i++) {
  data1.push(i * 10);
}

var data2 = [];
for (var i = 1; i <= barCount; i++) {
  data2.push(i * 3);
}

const data = {
  'labels': labels,
  datasets: [{
    label: 'Bar 1',
    data: data1,
    backgroundColor: 'rgba(100, 149, 237, 0.25)',
    barPercentage: 0.8
  }, {
    label: 'Bar 2',
    data: data2,
    backgroundColor: 'rgb(100, 149, 237,0.8)',
    barPercentage: 0.6
  }]
};

const canvas = document.getElementById('myChart');
const headerHeight = 75;
canvas.height = barCount * 25 + headerHeight;

const config = {
  type: 'bar',
  data: data,
  options: {
    maintainAspectRatio: false,
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true,
        position: 'top'
      },
      y: {
        beginAtZero: true,
        stacked: true
      }
    },
    plugins: {
      legend: {
        display: true
      },
      layout: {
        padding: {
          left: 20,
          right: 20
        }
      }
    }
  }
};

new Chart(canvas, config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

赞(0）回复(0）举报 2023-05-22

我来回答

ChartJS 需要增加水平条形图中Y轴的长度

1条答案

相关问题

热门标签

最新问答