ウィジェットの操作 > 2D > 時系列チャート
時系列チャート
このウィジェットの機能
「時系列チャート」ウィジェットは、X 軸を時間とする時系列データで使用するためのウィジェットです。このチャートでは、マーカーレンダリングまたはポイントマーカーレンダリング (あるいはその両方) だけがサポートされています。
* 
データは時系列チャートにバインドする必要があります。
このウィジェットを使用するケース
データ点を継続的に示す場合は、時系列チャートを使用します。たとえば、トラックの過去 1 時間の PRM を示すチャートを表示する場合は、「時系列チャート」ウィジェットを使用して、接続されているトラックの RPM プロパティをウィジェットに「データ」としてバインドします。
このウィジェット固有のプロパティ、サービス、イベント、操作
一般的なウィジェットのプロパティ、サービス、イベントのリストについては、共通のウィジェットプロパティ、サービス、イベントを参照してください。
プロパティ
JavaScript
タイプ
説明
X 軸フィールド
labelsField
string
グラフの X 軸に対して表示されるデータ。フィールド名を手動で入力します。たとえば、「名前」などを入力します。
Y 軸フィールド
valuesField
string
グラフの Y 軸に対して表示されるデータ。フィールド名を手動で入力します。たとえば、「ユーザー」などを入力します。
動作中のウィジェット
ウィジェットがどのように表示されるか、以下に例を示します。
使用時に必要な最小ステップ
外観
1. 「時系列チャート」ウィジェットをキャンバス上にドラッグアンドドロップします。
2. 「データ」枠で、履歴データを返すサービスが含まれているエンティティをサーチします。
3. サービスが追加されたら、「すべてのアイテム」をウィジェット上にドラッグアンドドロップし、「バインドターゲットを選択」ウィンドウで「データ」を選択します。
4. 「X 軸フィールド」ドロップダウンで、プロパティを選択します。この例では、「速度」を選択します。
5. 「Y 軸フィールド」ドロップダウンで、プロパティを選択します。この例では、「RPM」を選択します。
ThingWorx データのバインディングによるフィールドコンフィギュレーション支援機能
ThingWorx のデータをウィジェットにバインドすると、ドロップダウンリスト内のオプションがいくつかのフィールドに取り込まれます。たとえば、「すべてのアイテム」を「時系列チャート」ウィジェットにバインドし、「バインディングターゲットを選択」ウィンドウで「データ」を選択すると、「X 軸フィールド」プロパティと「Y 軸フィールド」プロパティに有効なオプションが取り込まれます。
JavaScript と CSS でのウィジェットのスタイル設定
JavaScript を使用して、ウィジェットのスタイルを設定できます。次に例を示します。
* 
クラスに一意の名前を付けて、別のクラスや 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. 時系列チャートの「クラス」フィールドに新しいクラスを入力します。
更新できるプロパティの完全なリストについては、https://www.chartjs.org/docs/latest を参照してください。
詳細については、Vuforia Studio での JavaScript の使用およびアプリケーションのスタイルを参照してください。
これは役に立ちましたか?