如何使Chartist.js上的条宽响应

Question

如何使Chartist.js上的条形条宽度响应，以便当有更多的空间供它们“增长”时，条形条会更宽。

• ，而不需要将数据转换成一系列.

Answer 1

我创建了一个插件来解决这个问题。

您可以调整0.7，直到各条的宽度和每条之间的间距正好合适为止。然后，它将根据画布/图表的宽度调整stroke_width。

import Chartist from 'chartist';

const pluginDynamicBarWidth = (optionProps) => (chart) => {

  Chartist.extend({}, {}, optionProps);

  chart.on('draw', (data) => {
    const numberOfLabels = optionProps;
    const chartWidth = chart.container.clientWidth;
    const canvas = chartWidth * 0.7;
    const strokeWidth = canvas / numberOfLabels;

    if (data.type === 'bar') {
      data.element._node.style.strokeWidth = `${strokeWidth}px`;
    }
  });
};

export default pluginDynamicBarWidth;