높은 차트에서 필드 이름을 설정하는 방법은 무엇입니까?

Question

나는 highcharts에서 초보자입니다. 이전에 검도 UI 차트를 사용했습니다. 검도에서, 우리는 우리가 아래 차트에 플롯 할 필드 이름 알 수 있습니다 :

series: [{ 
    name: "steps", 
    field: "steps", 
    categoryField: "createddate" 
}] 

을 우리는 아래와 같은 데이터 소스를 알 수 있습니다 :

dataSource: dSource 

를 DSOURCE는 AJAX의 URL입니다.

튜토리얼의 어디에서든지 찾을 수 없었습니다. 내 JSON 파일은 다음과 같습니다.

[{"ActivitySummaryKey":174000, 
    "id":"kkse2", 
    "activityscore":-, 
    "activitycalories":456, 
    "caloriesBMR":1017, 
    "caloriesOut":1412, 
    "distances":1.57828236, 
    "elevation":0, 
    "fairlyActiveminutes":34, 
    "floors":0, 
    "lightlyActiveMinutes":28, 
    "marginalCalories":334, 
    "sedentaryMinutes":827, 
    "steps":5077, 
    "veryActiveMinutes":26, 
    "trackersteps":0, 
    "trackerdistances":0, 
    "trackerfloors":0, 
    "trackerelevation":0, 
    "trackerActivityCalories":0, 
    "trackerCaloriesOut":0, 
    "trackerMinutesSedentary":0, 
    "trackerminutesLightlyActive":0, 
    "trackerminutesFairlyActive":0, 
    "trackerminutesVeryActive":0, 
    "createddate":"9/17/2014 12:00:00 AM", 
    "distanceunit":"Miles" 
}] 

x 축에 단계를 그리고 x 축에 createddate를 플롯해야합니다.

어떻게 진행하나요?

Answer 1

하이 차트 데이터 형식 (예 : series.data)을 사용해야합니다.

포인트를 표시하려면 x 및 y를 JSON (steps 및 createddate)의 값으로 설정해야합니다. 또한 (Date.UTC()와 같이) 날짜를 구문 분석해야합니다.

그래서 결과는, Highcharts 필요는 다음과 같습니다

[{ 
    "ActivitySummaryKey":174000, 
    "id":"kkse2", 
    "activityscore":-, 
    "activitycalories":456, 
    "caloriesBMR":1017, 
    "caloriesOut":1412, 
    "distances":1.57828236, 
    "elevation":0, 
    "fairlyActiveminutes":34, 
    "floors":0, 
    "lightlyActiveMinutes":28, 
    "marginalCalories":334, 
    "sedentaryMinutes":827, 
    "steps":5077, 
    "veryActiveMinutes":26, 
    "trackersteps":0, 
    "trackerdistances":0, 
    "trackerfloors":0, 
    "trackerelevation":0, 
    "trackerActivityCalories":0, 
    "trackerCaloriesOut":0, 
    "trackerMinutesSedentary":0, 
    "trackerminutesLightlyActive":0, 
    "trackerminutesFairlyActive":0, 
    "trackerminutesVeryActive":0, 
    "createddate":"9/17/2014 12:00:00 AM", 
    "distanceunit":"Miles", 
    "x": 1410904800000,  // timestamp in ms for Highcharts, extracted from "createdate" 
    "y": 5077    // y-value for Highcharts 
}]