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