ChartJS 条形图未取100%

huus2vyu 于 2023-01-02 发布在 Chart.js

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

生成条形图时遇到问题：

我不明白为什么50%+50%不抽100%的座位？配置似乎是好的？我错过了什么？
下面是代码：

new Chart(draw, {
    type: 'bar',
    data: {
      labels: [currentYear],
      datasets: [
        {
          label: 'Legend 1',
          data: [50],
          backgroundColor: '#fdfd96', // yellow
        },
        {
          label: 'Legend 2',
          data: [50],
          backgroundColor: '#77b5fe', // blue
        },
      ],
    },
    options: {
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true,
        },
      },
      animation: {
        onComplete: function () {
          saveChartAsImage(
            this.toBase64Image(),
            currentYear,
            companyId,
            'actif',
            manualMode,
          );
        },
      },
    },
  });

chart.js

来源：https://stackoverflow.com/questions/74970183/bar-graph-not-taking-100

1条答案

按热度按时间

qvtsj1bj1#

你的代码和配置看起来是正确的，而且它工作正常 （见下文）**但是如果你想在保存侧，你可以将max:100添加到y轴，这可以解决高度问题。

- 以下是演示：**

const data = {
    labels: [2022],
    datasets: [{
          label: 'Legend 1',
          data: [50],
          backgroundColor: '#fdfd96', // yellow
        },
        {
          label: 'Legend 2',
          data: [50],
          backgroundColor: '#77b5fe', // blue
        },],
};

const config = {
    type: 'bar',
    data: data,
    options: {
        maintainAspectRatio: false,
        scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true,
          max:100
        },
    }}
};

new Chart(
    document.getElementById('chart'),
    config
);

<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  

<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

赞(0）回复(0）举报 2023-01-02

我来回答

ChartJS 条形图未取100%

1条答案

相关问题

热门标签

最新问答