ChartJS行大小

时间:2017-06-09 14:26:15

标签: chart.js

如何在水平条中设置固定的行大小。我试过

yAxes: [{
  barPercentage: 1.0,
  categoryPercentage: 1.0
}]

但它调整了条形图,我需要固定大小。 完美的是具有固定行大小(条形,标签)并且与数据量(滚动条)无关的图表。我可以用chartJS实现吗?

horizontal bar

code

感谢。

1 个答案:

答案 0 :(得分:0)

这是更新JS代码。这将修复水平栏中的固定行大小。

https://jsfiddle.net/1knt2md8/

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: [
      ['Label_1_Line_1', 'Label_1_Line_2', 'Label_1_Line_3'],
      ['Label_2_Line_1', 'Label_2_Line_2', 'Label_2_Line_3'],
      ['Label_3_Line_1', 'Label_3_Line_2', 'Label_3_Line_3'],
      ['Label_4_Line_1', 'Label_4_Line_2', 'Label_4_Line_3'],
      ['Label_5_Line_1', 'Label_5_Line_2', 'Label_5_Line_3'],
      ['Label_6_Line_1', 'Label_6_Line_2', 'Label_6_Line_3'],
      ['Label_7_Line_1', 'Label_7_Line_2', 'Label_7_Line_3'],
    ],
    datasets: [{
      label: "My First dataset",
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 70],
    }]
  },
  options: {
    scales: {
        yAxes: [{

        maxBarThickness : 80

      }],

      xAxes: [{
       ticks: {
            mix: 0,
            max: 40,
            stepSize: 5
        }

      }]
    }
  }
});