如何使 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;