问Chart.js配置
EN

Stack Overflow用户

提问于 2021-09-12 11:32:22

回答 1查看 73关注 0票数 1

我在chart.js中创建了一个条形图，其配置如下：

import Chart from 'chart.js/auto';

document.addEventListener("turbo:load", function(e) {
  let manufacturersPieChartCanvas = document.getElementById('manufacturers-pie-chart');

  if (manufacturersPieChartCanvas) {
    let labels = JSON.parse(manufacturersPieChartCanvas.dataset.manufacturers_chart_labels);
    let data = JSON.parse(manufacturersPieChartCanvas.dataset.manufacturers_chart_data);

    const config = {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          backgroundColor: ['yellow', 'red', 'green', 'blue'],
          data: data,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        categoryPercentage: 1,
        barPercentage: 0.8,
        scaleShowValues: false,
        indexAxis: 'y',
        scales: {
          yAxes: [{
            ticks: {
              autoSkip: false
            }
          }]
        }
      }
    };

    let manufacturersPieChart = new Chart(
      manufacturersPieChartCanvas,
      config
    );
  }
})

其中一部分看起来是这样的：

我正在尝试让所有的酒吧标题都显示出来。关于autoSkip false，我遵循了关于SO的建议，但它们似乎没有任何效果。对于此图表，必须始终显示所有条形图标题。此外，我更喜欢增加高度，使每个酒吧略厚。我已经尝试了配置选项，可以使它们变得更厚，但整个图表区域没有增加以适应它们？

有什么建议可以解决这些问题吗？

谢谢。

javascript

chart.js

回答 1

Stack Overflow用户

发布于 2021-09-12 11:47:15

在使用V3时，您正在尝试使用V2语法定义您的比例，如果您是从V2转换过来的，我建议您首先阅读migration guide。

要使条稍粗，可以将barPercentage和categoryPercentage增加到1，但这将删除条之间的所有间距。要使它们更大，唯一的另一种选择是使用CSS使画布更大，从而实际为图表提供更多空间

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'pink',
        barPercentage: 1,
        categoryPercentage: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'orange',
        barPercentage: 1,
        categoryPercentage: 1
      }
    ]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          autoSkip: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69151015

复制

相似问题

问Chart.js配置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js配置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js配置
EN