1

ハイチャートを使用して、このチャートのデザインを複製する作業を行ってきました。

完成したチャート

私は目的の結果を得るためにjsfiddleで遊んでいますが、問題は、パーセンテージが満たされていない白い領域を取得できず、バー間のギャップを取得できないことです。

これは、ハイチャートを使用しても可能ですか?

4

1 に答える 1

8

いいえ、完全に可能です。めちゃくちゃ難しいです。でもねえ、どうして？

ハイ チャートの問題は、特定の角度でチャートを回転または配置できないことです。

したがって、あなたが言及した効果を作成できるようにするには、新しいデータ項目ごとに個別のグラフを作成する必要があります.

もちろん、これらすべてをハードコーディングしたくないのでfor、データ エントリの開始点と終了点、ドーナツの相対的なサイズ (全体のサイズと内側のサイズ)、間隔を考慮して、ループを使用してコードを生成する必要があります。外側のドーナツの間、実際の値の比率などへの変換など: 詳細は割愛します。

試行錯誤の末、以下の結果になりました。

ここに画像の説明を入力

ここに画像の説明を入力

jsFiddle を用意したので、好みに合わせて設定を微調整して、目的の結果を得ることができます。最も重要なパラメータは次のとおりです。

// Specify all properties here:
var MIN = 0;                       // Specify minimum value (beginning of range) 
var MAX = 100;                     // Specify maximum value (ending of range)
var VALUES = [50, 30, 40, 95, 35]; // Specify the values
var VALUES_WHITE = [20, 20, 20, 20, 20]; // Values for the white donut (5 x 100/5)
var COLORS = ['#1FFFF0', '#FFCD05', '#68EB05', '#EB13EB', '#A7EB09']; // Colors
var CATEGORIES = ['Activity', 'Weight', 'Sleep', 'Health', 'Diet'];   // Categories
var BORDERWIDTH_CHART_1 = 20;       // The border width for the white donut chart
var BORDER_COLOR = 'rgba(96, 72, 193, 1)';

これらのパラメーターは、コードで使用され、上記のすべての変数を決定します。0たとえば、値の最小値と最大値を作成しました100。したがって、 の値はvar VALUES = [50, 30, 40, 95, 35];、グラフのパーセンテージ (0 ～ 100 スケール) を表します。

現在、5 つの異なるカテゴリのグラフを作成しました。より多く (またはより少なく) したい場合は、それに応じてプロパティを変更するだけで動作します (はずです)。私はまだそれをテストしていません。とにかく、グラフを好みに合わせて改善できます。ラベルにパーセンテージを追加したり、色を改善したりできます。

1 つだけ制限がありますBORDER_COLOR。チャートの背景色と同じ色でなければなりません。私が作成した jsFiddle では、これがbodyドキュメントの です (jsFiddle の右上の CSS を参照してください)。

気に入ってくれるといいな ：）

もうDEMOに連れて行ってください！

于 2014-11-19T00:17:21.667 に答える