ChartJS：数据大小太小时的高度问题

bq8i3lrv 于 2022-11-06 发布在 Chart.js

关注(0)|答案(3)|浏览(256)

我正在使用ChartJS：3.9.1 +React图表-2：4.3.1我有一个问题，当数据集太小（2-3个值）-有太多的空间之间的酒吧（见图片）：

当数据集具有足够的值时，此问题不可重现：

我的数据集：

barChartData = {
  labels: labels,
  datasets: [
    {
      data: values,
      backgroundColor: '#F5CB3E',
      // barThickness: 17,
      borderRadius: 5,
      categoryPercentage: 1.0,
      barPercentage: 0.5,
      minBarLength: 1,
      yAxisID: 'y',
    },
  ],
};

我的选项：

{
maintainAspectRatio: false,
responsive: true,
indexAxis: 'y',
plugins: {
  legend: {
    display: false,
    position: 'top' as const,
  },
  title: {
    display: false,
  },
  tooltip: {
    enabled: false,
  },
  datalabels: {
    display: true,
    color: '#f2f2f2',
    formatter: Math.round,
    anchor: 'end',
    align: function (context: DataSetContext) {
      const data = context.dataset.data[context.dataIndex];
      if (data < 10) {
        return 'start';
      } else {
        return 'end';
      }
    },
    offset: function (context: DataSetContext) {
      return context.dataset.data[context.dataIndex] < 10 ? -20 : 3;
    },
    clamp: true,
    font: {
      size: 14,
      weight: 600,
    },
  },
},
scales: {
  x: {
    stacked: true,
    grid: {
      display: false,
      drawBorder: false,
    },
    ticks: {
      font: { size: 13 },
      color: '#f0f0f0',
      display: false,
    },
    suggestedMax: (1 + 0.2) * configurableOptions.xAxisMaxValue,
  },
  y: {
    ticks: {
      beginAtZero: false,
      color: '#f0f0f0',
      font: {
        size: 14,
        weight: 500,
      },
    },
    grid: {
      drawBorder: false,
      display: false,
    },
  },
},

};
我使用了barPercentage和categoryPercentage，但没有任何变化。似乎文档中没有包含我的问题的答案。我希望无论数据集大小如何，条之间的距离和条的粗细始终相同。提前感谢！

chart.js

来源：https://stackoverflow.com/questions/73965335/chartjs-problem-with-height-when-data-size-is-too-small

3条答案

按热度按时间

osh3o9ms1#

在数据集中设置属性maxBarThickness，这将禁止条形变宽。
您需要删除此属性或更改画布的大小，以便您的条形图彼此更加接近。

赞(0）回复(0）举报 2022-11-06

vqlkdk9b2#

尝试栏百分比：1用于设置钢筋差距

赞(0）回复(0）举报 2022-11-06

ghhaqwfi3#

好吧，我终于接受了这个。也许，这个解决方案并不好，当然，你可以改进它，但它对我的情况是有效的：

<Box>
  <Box className={classes.chartBoxWrapper}>
    <Box className={classes.chartBox}>
      {barChartData && options && dataSize > 0 && (
        <Bar options={options} data={barChartData} />
      )}
    </Box>
  </Box>
  {dataSize > 10 && (
    <Box position="relative">
      <Box className={classes.shadowBox}></Box>
    </Box>
  )}
</Box>

和CSS：

chartBox: {
  borderRadius: '9px',
  height: ({ dataSize }: { dataSize: number }) => {
    if (dataSize === 0) {
      return '40px';
    } else {
      return `${dataSize * (40 - dataSize / 3)}px`;
    }
  },
},

chartBoxWrapper: {
  height: ({ dataSize }: { dataSize: number }) => {
    if (dataSize === 0) {
      return '40px';
    } else if (dataSize > 10) {
      return '315px';
    } else {
      return `${dataSize * (40 - dataSize / 4)}px`;
    }
  },
  overflowY: ({ dataSize }: { dataSize: number }) =>
    dataSize > 10 ? 'scroll' : 'initial',
},

shadowBox: {
  position: 'absolute',
  bottom: -3,
  left: 0,
  right: 0,
  background: 'linear-gradient(0deg, #232323 0%, rgba(35, 35, 35, 0) 100%)',
  height: '35px',
},

我只是动态增加图表高度，当大小大于10时，只需添加溢出并设置固定高度= 315px。

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS：数据大小太小时的高度问题

3条答案

相关问题

热门标签

最新问答