2014-08-27 47 views
2

我試圖找到任何插件,示例或相關資源如何爲html頁面構建Pareto Chart。我希望能夠使用html構建它,使用CSS來設計它,並通過json填充數據。我願意通過使用線圖和條形圖的組合來創建它,但是要確保沒有任何東西已經存在。使用Javascript/Html/JSON的帕累託圖/圖表

這裏是輸出我希望根據我的搜索產生 enter image description here

的一個例子,我只能似乎找到如何到的,例如,等就如何建立一個在Excel中,但沒有爲網頁。

任何想法或建議,非常感謝。

回答

4

Pareto圖表在很多JS圖表庫中都是標準的。 Here's演示一個在ZingChart

您可以查看創建帕累託圖表here的文檔。我是ZingChart團隊的一員,如果您對[email protected]有任何疑問,歡迎與我們聯繫。

2

從描述中我不確定您是從頭開始構建還是想要使用圖表包。通常情況下,我會避免重新發明輪子,但有時我會挑戰學習。下面是幾個鏈接到預先製作的javascript圖表包,可以做pareto,通過谷歌搜索(javascript pareto chart -excel -matlab)找到。

http://cyberpython.github.io/AwesomeChartJS/就是Apache 2.0

的更好的付費版本是http://www.dundas.com/但也有其他的。

對不起,這是一個鏈接列表。我希望能夠從我的記憶中得知方法,但我不會盡我所能去做HTML圖表。

+0

有趣AwesomeChartJS具有帕累託圖,條形圖,但沒有直方圖選項或柱形圖和線形圖連擊。 – David 2016-02-17 01:16:42

0

似乎有些選項是不自由和/或開放源碼:(

對於從頭開始構建,或至少立足於公共庫,D3可能是一個不錯的選擇。我遇到了一個類似的問題看圖生成直方圖累積頻率線包括在圖表,並建立自己的基礎上的一些例子,然後我調查進一步的選項帕累託圖表和排序直方圖

如果你想嘗試用d3 ,這裏有一些例子可以開始(它們不像其他答案那樣漂亮,但是圖表/ UI開發人員可以肯定它可以美化它):