使用Javascript / Html / JSON的帕累托图/图表

Question

我试图找到有关如何为html页面构建Pareto Chart的任何插件，示例或相关资源。我希望能够用html构建它，用CSS格式化它并通过json填充数据。我愿意通过使用折线图和条形图的组合从头开始构建它，但是要确保没有任何东西可用于此。

这是我希望产生的输出的一个例子

根据我的搜索，我似乎只能找到关于如何在Excel中构建一个的方法，示例等，但对于网络来说却没有。

非常感谢任何想法或建议。

Answer 1

帕累托图表在很多JS图表库中都是标准配置。 Here's ZingChart中的一个演示。

您可以查看用于创建排列图表here的文档。我是ZingChart团队的一员，如果您对support@zingchart.com有任何疑问，欢迎您与我们联系。

Answer 2

我不确定您的描述是否要从头开始构建或者是否要使用图表包。通常情况下，我会避免重新发明轮子，但我有时候会挑战学习。下面是一些预制的javascript图表包的链接，这些图表可以做pareto，可以通过谷歌搜索找到（javascript pareto chart -excel -matlab）。

http://cyberpython.github.io/AwesomeChartJS/是apache 2.0

付费较高的版本之一是http://www.dundas.com/，但还有其他版本。

很抱歉，这是一个链接列表。我希望能够从我的记忆中滔滔不绝地说出这个方法，但我并没有像我想的那样做HTML图表。

Answer 3

似乎有些选项不是免费的和/或开源的:(

从头开始构建，或者至少基于通用库​​，d3可能是一个不错的选择。我遇到了一个类似的问题，希望生成包含在图表中的累积频率线的直方图，并根据一些例子构建我自己的直方图。然后，我进一步研究了帕累托图和排序直方图的选项。

如果您想使用d3进行尝试，请参考以下示例（他们并不像其他答案一样漂亮，但是图表/用户界面开发人员可以对其进行美化。 ;当然）：

• a basic d3 pareto chart based off Excel example
• a histogram-based pareto chart in d3 - 在本文发布时，此d3示例不完整