HighCharts widget を使用すると、Highcharts フレームワークを使用してインタラクティブなチャート/グラフを作成できます。ただ1つの制限は、ワイヤリングが文字列のみを送信するため、関数 (フォーマッタ、イベントなど) を送信できないことです。
ワイヤリング
入力エンドポイント
- highcharts: Highchart チャートを描画する場合は、この入力エンドポイントを使用します。例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
{ "title": { "text": "Monthly Average Temperature", "x": -20 }, "subtitle": { "text": "Source: WorldClimate.com", "x": -20 }, "xAxis": { "categories": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, "yAxis": { "title": { "text": "Temperature (°C)" }, "plotLines": [{ "value": 0, "width": 1, "color": "#808080" }] }, "tooltip": { "valueSuffix": "°C" }, "legend": { "layout": "vertical", "align": "right", "verticalAlign": "middle", "borderWidth": 0 }, "series": [{ "name": "Tokyo", "data": [ 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 ] }, { "name": "New York", "data": [ -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 ] }, { "name": "Berlin", "data": [ -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 ] }, { "name": "London", "data": [ 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 ] }] } |
詳細情報: http://api.highcharts.com/highcharts
highstock: Highstock チャートを描画する場合は、この入力エンドポイントを使用します
詳細情報: http://api.highcharts.com/highstock
出力エンドポイント
- selected: ユーザがポイントをクリックすると、データが送信されます
1 2 3 4 5 6 |
{ category :: String | Number, percentage :: Number, x :: Number, y :: Number } |
関連情報

Column chart generator operatorColumn chart generator operator は、列グラフをプロットする機能を提供する WireCloud オペレータ...

Trend Chart Generator operatorTrend Chart Generator operator は、トレンド・チャートを生成する機能を提供する WireCloud オペレ...

Gauge chart generator operatorGauge chart generator operator は、ゲージ・チャートをプロットする機能を提供する WireCloud オペ...

Pie Chart Generator operatorPie Chart Generator operator は、円グラフをプロットする機能を提供する WireCloud オペレータです。...

Reliability chart generator operatorReliability chart generator operator は、開発者の信頼性関連データをプロットする機能を提供する Wi...

WireCloud widget and operatorWireCloud では、ウィジェットとオペレータと呼ばれる機能部品を組み合わせることで、Web アプリケーションやダッシュボードを作成...