매쉬업에 위젯을 추가하고 기본 위젯 속성을 구성하는 방법을 보여주는 다음 비디오를 시청하십시오. 새 탭에서 비디오를 열려면 플레이어에서 제목을 클릭합니다.

꺾은선형 차트 위젯은 매쉬업에서 선으로 연결된 일련의 데이터 요소를 표시합니다.

꺾은선형 차트 외에도 위젯 ChartType 속성을 사용하면 다음 차트 변형 중 하나를 사용하여 데이터를 시각화할 수 있습니다.

런 차트

시간 단위를 기준으로 데이터를 시각화하는 꺽은선형 차트 유형입니다. 이 차트 유형을 사용하면 시간 경과에 따른 변경 사항을 모니터링하고, 추세와 주기를 감지하고, 특정 이벤트가 데이터에 미치는 영향을 측정할 수 있습니다. 이 차트 유형을 선택하면 위젯 CurveFitting 속성이 Monotone-X로 설정되어 데이터 요소 사이의 선 커브를 더 부드럽게 만듭니다.

단계 차트

단계 차트는 직각 가로줄 및 세로줄을 사용하여 데이터 요소를 연결합니다. 이 차트 유형은 값이 변경될 때 특정 시간을 강조 표시하려는 경우에 유용합니다.

영역형 차트

영역형 차트에서 선과 축 사이의 간격은 데이터 계열 색상을 사용하여 채워집니다. 기본적으로 데이터 계열은 하나의 계열이 다른 계열 위에 표시됩니다. 위젯 SeriesStacking 속성을 사용하면 모든 데이터 계열을 쌓아서 차트에 있는 모든 데이터 계열의 합계 값을 표시할 수 있습니다.

산점도 차트

산점도 차트에는 각 데이터 요소가 연결 선 없이 점으로 표시됩니다. 이 차트 유형은 두 개 이상의 데이터 계열 간 상관 관계를 보려는 경우에 유용합니다.

스트림 그래프 차트

스트림 그래프는 중심 축을 기준으로 데이터를 표시하는 영역형 차트 유형입니다. 특정 날짜의 각 데이터 계열 형태 크기는 값에 비례합니다. 이 차트 유형을 사용하면 차트의 총 데이터를 기준으로 데이터 계열에 대한 변경 사항을 분석할 수 있습니다.

차트의 데이터 구조를 나타내는 필드 정의가 포함된 인포테이블을 생성해야 합니다. 인포테이블에 X축 값 및 Y축 값에 대한 필드 정의를 포함해야 합니다. 데이터 계열 값에 대한 필드 정의가 있는 추가 열을 추가하여 여러 데이터 계열을 추가할 수 있습니다. 각 인포테이블 행은 X축의 카테고리와 여기에 해당하는 Y축 값을 나타냅니다. 다음 표에는 인포테이블의 데이터 형식이 나와 있습니다.

간격 확대/축소 컨트롤 옵션을 제공하려면 레이블과 기간 두 필드로 구성된 인포테이블을 생성해야 합니다. 두 필드의 기본 데이터 유형은STRING이어야 합니다. 다음 이미지는 데이터 서비스의 반환된 데이터 형식을 보여줍니다.

duration 필드에 사용할 수 있는 값과 이러한 값이 나타내는 범위는 다음과 같습니다.

차트를 데이터 소스에 바인딩하려면 다음을 수행합니다.

데이터가 이제 차트에 표시됩니다. 바인딩된 인포테이블의 각 추가 열이 데이터 계열로 표시됩니다.

데이터 소스를 바인딩한 후 Label, XAxisLabel 및 YAxisLabel 속성을 사용하여 레이블을 추가하는 것이 좋습니다.

추가 속성을 사용하여 구성할 수도 있습니다. 예를 들면, 다음과 같습니다.

SecondYAxis 속성을 사용하여 X축에 있는 하나의 카테고리에 대한 서로 다른 두 측정을 나타내는 보조 축을 추가할 수 있습니다. 보조 축을 사용하여 하나 이상의 데이터 계열의 데이터를 표시할 수 있습니다. 예를 들어, 백분율 값을 표시하기 위해 세로 막대형 차트의 보조 축에서 데이터 계열을 도표로 만들 수 있습니다.

NumberofSeries가 고정 수로 설정되면 각 데이터 계열에 대한 DataFieldN 및 UseSecondAxisSeriesN 속성이 표시됩니다. 기본적으로 모든 데이터 계열은 기본 Y축에 표시됩니다. 보조 Y축의 데이터 계열을 표시하려면 UseSecondAxisSeriesN 속성을 활성화합니다.

차트에 보조 Y축을 추가하려면 열이 두 개 이상 포함된 인포테이블을 데이터 값과 바인딩합니다.

보조 축 데이터를 수동으로 지정하려면 다음 단계를 수행합니다.

이제 보조 축이 구성되고 데이터가 나타납니다. 보조 축을 추가한 후 다음 중 하나를 수행할 수 있습니다.

다음 그림에서는 보조 Y축이 있는 꺾은선형 차트 위젯을 보여줍니다. X축에는 날짜 범위가 표시되고 각 Y축에는 각 날짜에 대한 데이터 측정 유형이 표시됩니다.

X축 형식은 Date/Time으로 설정되고 Y축은 YAxisFormat 및 SecondYAxisFormat 속성을 사용하여 숫자로 설정됩니다.

다음 표에는 보조 Y축을 활성화하고 구성하는 데 사용할 수 있는 속성이 나와 있습니다.

꺾은선형 차트 위젯은 D3 JavaScript 라이브러리를 기반으로 하며, 여기에는 꺾은선형 차트에 선이 표시되는 방법을 제어하는 여러 함수에 대한 지원이 포함되어 있습니다. ThingWorx에서는 꺾은선형 차트를 지원하는 위젯 내의 CurveFitting 속성을 사용하여 선 그리기 방법을 구성할 수 있습니다. 다음 목록에서는 이 속성에 사용할 수 있는 옵션에 대해 설명합니다.

선형 - 직선을 사용하여 데이터 요소를 연결하는 다각형 선입니다.

기준 - 지정한 제어점을 사용하는 3차 기준 스플라인입니다. 첫 번째 점과 마지막 점은 세 배로 늘어나고, 스플라인은 첫 번째 점에서 시작하여 마지막 점에서 끝나며, 첫 번째 점과 두 번째 점 사이의 선과 끝에서 두 번째 점 사이의 선에 탄젠트합니다.

번들 - 지정한 제어점을 사용하여 직선화된 3차 기준 스플라인으로, 0.5로 설정된 베타 커브 값을 기준으로 스플라인을 직선화합니다.

카디널 - 지정한 제어점을 사용하는 3차 카디널 스플라인으로, 첫 번째 조각과 마지막 조각에 한 면 차이가 사용됩니다. 장력 값은 0.5로 설정됩니다.

캐트멀-롬 - 지정한 제어점과 0.5로 설정된 알파 매개 변수를 사용하는 3차 캐트멀-롬 스플라인입니다.

모노톤-X - X축의 단조성을 가정하여 Y축에서 단조성을 유지하는 3차 스플라인입니다. 이 선은 잘못된 진동 없이 데이터 요소 세트를 통과하는 부드러운 커브를 생성합니다.

모노톤-Y - Y축의 단조성을 가정하여 X축의 단조성을 유지하는 3차 스플라인입니다. 이 선은 잘못된 진동 없이 데이터 요소 세트를 통과하는 부드러운 커브를 생성합니다.

자연 - 스플라인의 2차 변형을 데이터 끝점에서 0으로 설정하는 자연 3차 스플라인입니다.

단계 - 수평선과 수직선을 번갈아 가며 구성한 단계 선입니다.

이러한 옵션에 대한 자세한 내용은 GitHub의 D3 Library 설명서를 참조하십시오.

꺾은선형 차트 위젯 속성은 다음과 같습니다.