HTMLページのパレート図を作成する方法に関するプラグイン、例、または関連リソースを見つけようとしています。HTMLから構築し、CSSでスタイルを設定し、jsonを介してデータを入力できるようにしたいと考えています。折れ線グラフと棒グラフを組み合わせてゼロから作成したいと思っていますが、これにはまだ何もないことを確認したいと思います。
これは、私が生成したい出力の例です
私の検索に基づいて、Excelで作成する方法に関するハウツー、例などしか見つけられないようですが、Web用のものは何もありません。
アイデアや提案は大歓迎です。
パレート図は、かなりの数の JS チャート作成ライブラリで標準装備されています。これはZingChartのデモです。
パレート図を作成するためのドキュメントは、こちらでご覧いただけます。私は ZingChart チームの一員です。ご不明な点がございましたら、support@zingchart.com までお問い合わせください。
あなたの説明から、ゼロから構築したいのか、チャートパッケージを使用したいのかわかりません. 通常、車輪の再発明は避けますが、学ぶために挑戦することもあります。以下は、Google 検索 (javascript pareto chart -excel -matlab) で見つかった、pareto を実行できる javascript チャートの事前作成済みパッケージへのリンクです。
http://cyberpython.github.io/AwesomeChartJS/は apache 2.0 です
より優れた有料バージョンの 1 つはhttp://www.dundas.com/ですが、他にもあります。
すみません、これはリンクのリストです。私は自分の記憶からメソッドをガタガタ鳴らしたいと思っていますが、HTML チャートはあまりやりたくないのです。
一部のオプションは無料および/またはオープンソースではないようです:(
ゼロから構築する場合、または少なくとも共通のライブラリに基づいて構築する場合は、d3 が適切な選択になる可能性があります。グラフに含まれる累積度数線を使用してヒストグラムを生成し、いくつかの例に基づいて独自のヒストグラムを作成しようとして、同様の問題に遭遇しました。次に、パレート図と並べ替えられたヒストグラムのオプションについてさらに調査しました。
d3で試してみたい場合は、次の例から始めてください（他の回答のようにきれいにレンダリングされていませんが、チャート/ UI Web開発者はそれをきれいにすることができます）：