何が新しいJavaScriptのチャートですか?

ダッシュボードのウィジェットチャート

リニアゲージからカラムとバーに15の新しいダッシュボードウィジェットグラフの例は、完全なブリードエリアライン、活字ウィジェットとライングラフのウィジェットに変更の指標とアイコンを円形のゲージを迅速かつ容易にカスタムグラフのダッシュボードを構築するのに役立ちます.

ピクトグラムチャートと絵文字

Jschartingの統合アイコンのサポートは、ピクトグラムチャートとグラフのための巨大な選択を提供します.ピクトグラムバーとパーセンテージチャートは、強力なタイポグラフィと組み合わせて、迅速かつ容易に自分のデータを伝える魅力的なチャートを作成します.

能力ごとに複数の親とコネクタのスタイルを設定する

ポイント
我々はその点を拡張した.親プロパティを使用すると、親ごとに複数の親とコネクタのラインスタイルを定義できます.

parent:[
{id: 'p1', line: {color: 'green'}},
{id: 'p2,p3', line: {color: 'red'}}
]

ガントチャートクリティカルパスサポート

ガントチャートの新しいコネクタのスタイリングのサポートをカスタマイズし、ガントチャートのクリティカルパスを強調することができます.

軸カテゴリ

新しい軸を追加しました.ので、データポイントカテゴリ名を一度だけ定義することができますし、並べ替え順序をより多くのコントロールを持つカテゴリのプロパティ.便宜上、一連のY値の配列を指定できます.ポイントプロパティ.
以前

series: [
{name: 'Series 1',
points: [{x: 'A', y: 5}, {x: 'B', y: 10}]
}, {name: 'Series 2',
points: [{x: 'A', y: 15}, {x: 'B', y: 20}]
}]

アフター

xAxis_categories: ['A', 'B'],
series: [
{name: 'Series 1', points: [5, 10]},
{name: 'Series 2', points: [15, 20]}]

直角または直線組織のコネクタライン

我々は、デフォルトで直角にそれらを描画することにより、組織のコネクタラインがどのように表示されるかを強化しました.このオプションを変更するにはストレートオプションを使用し、ポイント間で直接コネクタ行を描画できます.

type: 'organizational straight'

組織のノード幅と高さの同期化

我々はポイントを追加しました.注釈.SyncWidthとSynchelightのプロパティは、サイジングと組織図のノードの視覚的なバランスを制御するために.

defaultPoint_annotation: {
// syncWidth: true == syncWidth_with: 'level'
syncWidth_with: 'level',
syncHeight_with: 'all'}

ポイント階層コネクタのスタイリングと選択

現在、階層パスセレクタを使用して、組織またはガント依存グラフ内の特定の分岐を選択する方法があります.階層、上下、または2つのポイントの間に階層をポイントからすべての分岐を選択することができます.例えば

// All branches from pointID up the hierarchy.
['pointID', 'up']
// All branches from pointID down the hierarchy.
['pointID', 'down']
// All branches from pointID up and down.
['pointID', 'both']
// All branches between pointA and pointB.
['pointA', 'pointB']
// A specific branch of points.
['pointA', 'pointB', 'pointC']
// Multiple branches and selectors.
[['pointA', 'pointC'], ['pointC', 'up']]

グラフを使用します.接続セレクタを使用するパスセレクタの関数.チャート.connectors ()関数を使用すると、選択に基づいてパスの一覧を取得したり、特定のパスのコネクタラインスタイルを変更したり、コネクタスタイルを元のスタイルにリセットしたりできます.

// Styles all connector lines from pointA up the hierarchy
chart.connectors(['pointA', 'up'], {color: 'red'});
// Reset all previously applied styling from pointA up the hierarchy
chart.connectors(['pointA', 'up']);
// Reset all line styling previously applied by this function
chart.connectors();

能力を階層セレクタを使用してポイントを取得する

パスセレクタを使用してスタイリングコネクタラインに加えて、選択したパスに含まれるすべてのポイントのコレクションを取得するためにそれらを使用することができます.例えば、これは[' pointa '、' up ']枝の中のすべての点に選択された状態を適用します.

chart.series()
.points(['pointA', 'up'])
.options({selected: true})

新しい点connectorlineプロパティ

現在、データポイントあたりの組織やガントチャートのコネクタラインスタイリングを指定することができますまたはすべてのポイントのデフォルトとして.

defaultPoint_connectorLine:
{color: 'blue', width: 2})

新しいコネクタライン半径オプション

我々は、組織のコネクタまたはガント依存線の丸い角を制御するために、コネクタ線半径プロパティを加えました.また、線に沿って各コーナーに異なる半径を適用するために、グラフの2つの半径の配列を提供することもできます.

defaultPoint_connectorLine: {radius: 5}

各コーナーの半径.

defaultPoint_connectorLine: {radius: [0,5]}

ポイントgetparents ()およびgetchildren ()関数

手動でデータポイントを組織図で横断する必要がありますか?これでgetparents ()とgetChildren ()ポイント関数を使用して、階層ツリーの上下にポイントのコレクションを取得できます.

chart.series()
.points(0)
.getChidren()
.each(p => console.log(p.name));

タグの線形勾配

アイコンを任意のグラフのラベルの中で使用することができます知っていましたか?JScharting 3.3では、以下のように色とリストのリストを指定することにより、これらのアイコンのリッチグラデーションフィルを定義することができます.

label_text:
'<icon name=[name] fill=#c41111,#ec5a5a,90>'

ダイナミックグラデーション

我々は、グラデーション色をより簡単に定義するために色調整値でグラデーションカラー処理を展開しました.最初のグラデーションの色を指定した後、色調整値のいずれかに残りを設定することができます.

label_text:
'<icon name=[name] fill=#c41111,lightenMore,90>',
fill: ['#c41111', 'lightenMore', 90]

面積チャート充填のための動的勾配

我々は、シリーズにダイナミックグラデーションサポートを拡張しました.形状.塗りつぶしプロパティ.このプロパティのすべてのグラデーションの色を調整値に設定することができます.

defaultSeries_shape_fill:
['currentColor', 'white', 90] or
['currentColor', 'lightenmore', 220]

データポイント充填のための動的勾配

これで、データポイントを塗りつぶしグラデーション色で色調整値を使用することができます.

defaultPoint_fill: ['currentColor', 'white', 90]

ダイナミックラベル

JSchartingは、その背景と対照的なデータポイントのラベルの色をインテリジェントに選択することによって読みやすくなります.テキストがコネクタ線、フィルまたはグラデーションのような領域を重ねるとき、あなたは調整値色でテキストアウトラインを使うことができます.この調整は、自動的に選択したラベルの色に基づいています.

defaultPoint_label:
{outline: {color: 'contrast'}}

グリッドグリッド線幅を

私たちはすべての軸のスケールの種類で'軸'に軸ダニグリッド線幅を設定するサポートを追加しました.これは、軸の刻み、またはスタイルの列のグラフに進行状況バーのように見える十字線でこれを使用することができます.

xAxis_crosshair:
{enabled: true, gridLine_width: 'column'}

nest ()のデータオブジェクトパス

JSchartingでは、nest key ()およびrollup ()関数のオブジェクトプロパティパスをサポートします.あなたのグループにデータを処理し、グラフ上で視覚化する複雑な詳細を抽出するには、このユーティリティを使用することができます.

let dataGroupedByRoles = nest()
  .key('attributes.role')
  .entries(myData);

ズームボタン位置

JScharting 3.3では、デフォルトのマップのズームボタンの位置を変更することができます.

toolbar_items_zoom_position: 'inside top right'

次。JSサポート

このリリースでは、次の作業にJSchartingを有効にする修正と強化が含まれています.js環境.

その他

組織のコネクタラインピクセルのスナップ.

組織図のノードラベルは既定で中心です.

拡大されるとき、

は組織図デフォルト表示位置を改善しました.

自分でそれを試してみませんか?Download JSCharting Version 3.3