包含低值的柱在 chartjs 上几乎不可见

Question

enter image description here

图形（）{ 常量 bgColor = { 编号：'bgColor'， beforeDraw: (chart, steps, options) => { const { ctx, width, height } = 图表； ctx.fillStyle = 'white'; ctx.fillRect(0, 0, 宽度, 高度); ctx.restore(); }, }; const ctx = document.getElementById('myChart'); 新图表（ctx，{ 类型：'bar'，选项： { 回应：真实，维护纵横比：假，天平：{

      yAxes: [
        {
          beginAtZero:true,
          ticks: {
            callback(value, index) {
              return 'R$' + value;
            },
          },

        },
      ],
      xAxes: [{}],
    },
    legend: {
      display: false,
    },
  },
  plugins: [bgColor],
  data: {
    labels: this.dateChartFormated,
    datasets: [
      {
        type: 'line',
        label: 'R$',
        data: this.finalBalanceChart,
        backgroundColor: 'rgb(0,53,132)',
        borderColor: 'rgb(0,53,132)',
        lineTension: 0,
        fill: false,
      },
      {
        type: 'bar',
        label: 'R$',
        data: this.receivedAmounts,
        backgroundColor: 'rgb(37,126,37)',
        fill: false,
      },
      {
        type: 'bar',
        label: 'R$',
        backgroundColor: 'rgb(233,64,64)',
        borderColor: 'rgb(233,64,64)',
        borderWidth: 1,
        data: this.paymentAmounts,
        fill: false,
      },
    ],
  },
});

}

Answer 1

这就是图表的工作原理以及数据的正确表示方式。但是如果你想让所有的条都更明显，你可以使用 minBarLength 选项。这确保条形图至少有那么多像素高。

这可以在数据集级别上进行配置，因此只有来自该数据集的条柱在 yAxes 的选项中才那么高或在图表级别上，尽管图表级别选项已被弃用并且不再在 V3 中工作:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [1200, 19, 3, 5, 2, 3],
        backgroundColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'orange',
        minBarLength: 100, // Set the min bar length on a dataset level so only the orange bars will be at least 100 pixels high
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        minBarLength: 100, // Set the min bar length on a chart level so all bars will be at least 100 pixels high
      }]
    }
  }
}

const 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/2.9.4/Chart.js"></script>
</body>

包含低值的柱在 chartjs 上几乎不可见

The bar that contains a low value is almost invisible on the chartjs

javascript

chart.js