|
データは時系列チャートにバインドする必要があります。
|
プロパティ
|
JavaScript
|
タイプ
|
説明
|
X 軸フィールド
|
labelsField
|
string
|
グラフの X 軸に対して表示されるデータ。フィールド名を手動で入力します。たとえば、「名前」などを入力します。
|
Y 軸フィールド
|
valuesField
|
string
|
グラフの Y 軸に対して表示されるデータ。フィールド名を手動で入力します。たとえば、「ユーザー」などを入力します。
|
使用時に必要な最小ステップ
|
外観
|
1. 「時系列チャート」ウィジェットをキャンバス上にドラッグアンドドロップします。
2. 「データ」枠で、履歴データを返すサービスが含まれているエンティティをサーチします。
3. サービスが追加されたら、「すべてのアイテム」をウィジェット上にドラッグアンドドロップし、「バインドターゲットを選択」ウィンドウで「データ」を選択します。
4. 「X 軸フィールド」ドロップダウンで、プロパティを選択します。この例では、「速度」を選択します。
5. 「Y 軸フィールド」ドロップダウンで、プロパティを選択します。この例では、「RPM」を選択します。
|
クラスに一意の名前を付けて、別のクラスや OOTB プロパティと競合しないようにすることをお勧めします。 |
例 | 外観 |
JavaScript エディタで、以下のコードを入力します。 // Chart Legends Chart.defaults.global.legend.position="bottom"; Chart.defaults.global.legend.labels.fontColor="#ffffff"; Chart.defaults.global.defaultFontColor="#0000ff"; Chart.defaults.global.defaultFontSize=10; Chart.defaults.global.title.display=true; //For timeseries LINES Chart.defaults.global.elements.line.backgroundColor="#ffffff"; Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)'; // for time series POINTS Chart.defaults.global.elements.point.backgroundColor="#ffffff"; Chart.defaults.global.elements.point.borderColor="#007777"; Chart.defaults.global.elements.point.radius=2; | |
JavaScript エディタで、以下のコードを入力します。 1. JavaScript エディタで、以下のコードを入力します。 // Time Series lines Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)'; Chart.defaults.global.elements.line.backgroundColor="#add8e6" Chart.defaults.global.elements.line.fill='top'; // Time Series points Chart.defaults.global.elements.point.backgroundColor="rgba(255, 255, 0, 0.7)"; Chart.defaults.global.elements.point.borderColor="rgba(255, 0, 0, 1)"; Chart.defaults.global.elements.point.radius=5; // Time Series chart legend, title, font settings Chart.defaults.global.defaultFontColor="#0000ff"; Chart.defaults.global.legend.display=true; Chart.defaults.global.legend.labels.fontColor="#ff0000"; Chart.defaults.global.legend.position="bottom"; Chart.defaults.global.title.text="Title of line chart"; Chart.defaults.global.title.display=true; 2. アプリケーションエディタに次のクラスを追加します。 .ptc-TimeSeries { height: 400px; } 3. 時系列チャートの「クラス」フィールドに新しいクラスを入力します。 | |
1. JavaScript エディタで、以下のコードを入力します。 Chart.defaults.global.legend.position="bottom"; Chart.defaults.global.legend.labels.fontColor="#5bb73b"; Chart.defaults.global.defaultFontColor="#007a3e"; Chart.defaults.global.defaultFontSize=14; Chart.defaults.global.title.display=true; //For timeseries LINES Chart.defaults.global.elements.line.backgroundColor="#ffffff"; Chart.defaults.global.elements.line.borderColor="#5bb73b"; 2. アプリケーションエディタに次のクラスを追加します。 .ptc-TimeSeries { height: 400px; } 3. 時系列チャートの「クラス」フィールドに新しいクラスを入力します。 |