我創建了一個插件來解決這個問題。

您可以調整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;