タイムライン

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Timelineコントロールには、イベントのタイムラインが表示されます。これらのイベントは、コントロールのDataプロパティで指定します。Dataプロパティは、このコントロールに使用する必要がある唯一のプロパティです。

コントロールは、イベントオブジェクトの配列を含むJavaScriptオブジェクトとしてデータを想定します。このデータは、さまざまな方法でコントロールに渡すことができます。

Dataプロパティをデータソースにバインドできます。このデータソースは、自分で作成する必要があります。
PageCode JavaScriptでデータを作成し、このデータをコントロールに渡すことができます ( app.Timeline1.set("data", data).

タイムラインは次のようになります。

ユーザーはタイムラインをドラッグして他の期間を表示したり、スクロールを使用してズームインおよびズームアウト (時間解像度の変更) を行ったり、タッチスクリーンデバイスのタッチイベントを使用してTimelineコントロールを操作したりできます。

タイムラインには、次の部分が含まれています。

タイムラインの上部にある赤いバーはEraバーです。これを使用して、連絡先のステータスが「匿名」から「顧客」に変わったときなど、新しい時代を始める重要なイベントをマークします。 Timelineコントロールには、EraTextプロパティで指定したテキストが赤いバーのすぐ下に表示されます。
タイムラインは、通常のイベントを縦棒で表します。これらのイベントのイメージを指定できます。これを行うと、Timelineコントロールにこのイメージがスティック (手など) の上に表示されます。
定量化可能なイベントは棒グラフで表されます。Duration、EngagementValue、MonetaryValueにはバーがあります。バーの高さは、現在表示されている他のバーに対して相対的です。これらのイベントのイメージを指定できます。その場合、Timelineコントロールの下部にこの画像 (電話など) が表示されます。

データ形式

Timelineコントロールのデータは、JavaScriptオブジェクトの配列として提供する必要があります。

{  
   "dataSet":{  
      "journey":[]
   }
}

ここで、journeyはイベントオブジェクトの配列です。これは、イベントオブジェクトの例です。

{
   "TimelineEventId": "8724ff0e-24e2-4980-a63c-ca3c07d39fff",
  "EventType": "Quantifiable",
  "ImageUrl": "phone.png",
  "DateTime": "2011-01-01T09:04:16",
  "Duration": 13945000,
  "EngagementValue": 982,
  "MonetaryValue": 2067,
  "EraText": "Anonymous",
  "IndicatorImagePath1": "",
  "IndicatorImagePath2": ""
},

イベントのフィールドについては、次の表で説明します。

名前	形容
タイムラインイベントID	イベントのID。
イベントタイプ	Normal、Quantifiable、またはEraChange.上記の説明を参照してください。
画像URL	イベントの画像を指します。上記の説明を参照してください。
日時	タイムライン上のイベントを配置する場所を示します
期間	EventTypeがQuantifiableしているときに棒グラフの棒の1つとして表される数値。
エンゲージメントバリュー	EventTypeがQuantifiableしているときに棒グラフの棒の1つとして表される数値。
モネタリーバリュー	EventTypeがQuantifiableしているときに棒グラフの棒の1つとして表される数値。
エラテキスト	EventTypeがEraChangeのときにコントロールの上部にあるEraバーに表示されるテキスト。
インジケーターImagePath1	イメージをポイントします。使用すると、Timelineコントロールではバーの横に画像が表示され、イベントに関する視覚的な情報が増えます。
インジケータImagePath2	イメージをポイントします。使用すると、Timelineコントロールではバーの横に画像が表示され、イベントに関する視覚的な情報が増えます。

追加のフィールドを追加して、好きなように呼び出すことができます。 Timelineコントロールは、このようなフィールドを無視します。

いくつかの重要なメソッドとプロパティ

特定のイベントを選択するには、イベントのIDをselectSegmentIdメソッドに渡します。

app.Timeline1.viewModel.selectSegmentId("6ecb6136-aee4-4fa7-8b1d-1d3bf3e0f59b");

イベントを選択したら、次のように隣接するイベントに移動できます。

app.Timeline1.viewModel.selectPreviousSegment();
app.Timeline1.viewModel.selectNextSegment();

現在選択されているイベントは、次の方法で取得できます。

app.Timeline1.get("selectedSegment")

この記事を改善するための提案がある場合は、お知らせください!