如何为条形图中的条设置不同的宽度答案

【问题标题】：How to set different widths for bars in barchart如何为条形图中的条设置不同的宽度
【发布时间】：2016-04-01 13:34:18
【问题描述】：

我正在使用flot 库来构建条形图。我需要为每个条设置不同的宽度。我对flot 和一般的 javascript 还是很陌生，所以我不想破解我的方法。

有没有干净的方法来做到这一点？

【问题讨论】：

先自己尝试，然后在这里提出具体问题。
这个问题似乎很具体，对于新手来说无法找到解决方法是完全可以理解的，因为在大多数 flot 示例中都没有涵盖这种情况。随时证明我错了。
如果不更改插件的内部代码，单个数据系列中的不同条形宽度是不可能的。您可以做的是将您的数据系列分成多个系列，每个所需的条形宽度一个。

【解决方案1】：

您可以通过编辑类名为 flot-base 的画布的样式属性来做到这一点。向 HTML 中的此类属性添加一个额外的 CSS 类，或使用 Javascript 动态执行此操作。为此，您可以add it to the classList，编辑样式属性或使用jquery addClass method。

例如，当您的浮动代码已加载到 DOM 中时，您可以通过以下方式访问正确的画布：

var myFlot = document.querySelector('.flot-base');
myFlot.style.display.width = '1200px';
myFlot.style.display.height = '500px';
// alternative: myFlot.classList.add('cssClassWithCorrectDimensions');

编辑：我可能误解了您的问题，您的意思是条形图中的各个条形。在这种情况下：对不起。 :p

我希望这对你有所帮助。 :-)

【讨论】：

你能告诉我你在使用 javascript 实现的想法吗？
更改画布的样式对图表中的各个条形没有任何作用。
我编辑了我的原始帖子。这对您有更多帮助吗？
确实，我的意思是我需要每个单独的条具有不同的宽度。一些谷歌研究表明，这些图表是“Marimekko”图表，flot.js 库不支持该插件。