동일한 컨테이너 (하이 차트)의 동일한 데이터와 함께 세로 막 대형 차트와 꺾은 선형 차트 결합

Question

여러 계열의 세로 막 대형 차트와 꺾은 선형 차트가있는 조합형 차트를 만들려고합니다. 문제는 중첩 된 JSON 응답으로 높은 차트 데이터를 얻고 있다는 것입니다. 이를 위해 나는 배열을 초기화했으며 그 배열은 아래 코드에서 볼 수있는 것처럼 plotoptions 하이 차트에서 시리즈로 제공됩니다.

내 코드는 다음과 같다 :

var crime_data=[]; 
        for(var i=0;i<result.themes.length;i++){ 
          var crime={}; 
          var test2 = result.themes[i]; 
          var test = test2[Object.keys(test2)]; 
         crime.name = Object.keys(result.themes[i]); 
         crime.data = []; 
          for(var k=0;k<test.yearTheme.length;k++){ 
           var test3=test.yearTheme[k]; 
           var test5=test3.individualValueVariable; 
           for(var j=0;j<test5.length;j++){ 
           crime.data.push(test5[j].count); 
          }; 
         }; 
         crime_data.push(crime); 
          }; 

    var crimeChart = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'container1', 
    type:'column' 
    }, 
    title: { 
     text: 'Crime' 
    }, 
    xAxis: { 
     categories: month, 
     crosshair: true 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Count' 
     } 
    }, 
     credits: { 
      enabled: false 
    }, 
    tooltip: { 

     shared: true, 
    }, 
    plotOptions: { 

     column: { 
      pointPadding: 0.2, 
      borderWidth: 0, 

      depth: 25, 
      allowPointSelect: true, 
      cursor: 'pointer', 
      point: { 

       }, 

     } 
    }, 
series: crime_data 

}); 

이 내가 차트 유형 열을 쓸 때 내가 무엇입니까 열 차트이다.

이것은 하이라이트 차트에서 유형 열을 스플라인으로 변경했을 때의 라인 차트입니다.

그리고 이것은 내 JSON 데이터 (Highcharts 데이터)이다 : 나는 같은 data.The 문제와 같은 용기에 둘을 결합하려는

{ 
    "boundaries": { 
    "boundary": [ 
     { 
     "boundaryId": "55083021003", 
     "boundaryType": "USA_CITY", 
     "boundaryRef": "C1" 
     } 
    ] 
    }, 
    "themes": [ 
    { 
     "AssaultCrimeTheme": { 
     "boundaryRef": "C1", 
     "individualValueVariable": [ 
      { 
      "name": "2013 Assault Crime", 
      "description": "Assault Crime for 2013", 
      "count": 18901 
      }, 
      { 
      "name": "2014 Assault Crime", 
      "description": "Assault Crime for 2014", 
      "count": 17707 
      } 
     ] 
     } 
    }, 
    { 
     "BurglaryCrimeTheme": { 
     "boundaryRef": "C1", 
     "individualValueVariable": [ 
      { 
      "name": "2013 Burglary Crime", 
      "description": "Burglary Crime for 2013", 
      "count": 17743 
      }, 
      { 
      "name": "2014 Burglary Crime", 
      "description": "Burglary Crime for 2014", 
      "count": 14242 
      } 
     ] 
     } 
    } 
    ] 
} 

이 highcharts을 구별하는 방법에에 여러 시리즈는 라인과 같은 데이터를 가진 컬럼 타입으로 표현되어야합니다. 시리즈 작성시 : {data : crime_data, type : spline} 대신 series : crime_data를 사용하십시오.이 경우 Highcharts 데이터를 가져 오지 못합니다. 누구든지이 일을 어떻게해야하는지 제발 도와 주실 수 있습니까? 제발 제안 해주세요.

Answer 1

다음 형식과 같이 데이터를 전달하십시오. 각 데이터 시리즈에 차트 유형 추가; 여기에서 유형 값을 동일한 데이터로 대체했습니다. 여기

[{ 
     type: 'line', 
     name: 'AssaultCrimeTheme', 
     data: [3, 2, 1, 3, 4] 
    }, { 
     type: 'line', 
     name: 'BurglaryCrimeTheme', 
     data: [2, 3, 5, 7, 6] 
    }, { 
     type: 'column', 
     name: 'AssaultCrimeTheme', 
     data: [3, 2, 1, 3, 4] 
    }, { 
     type: 'column', 
     name: 'BurglaryCrimeTheme', 
     data: [2, 3, 5, 7, 6] 
    },] 

은 자세한 내용 fiddle입니다.

Answer 2

다음은 데이터를 사용하는 완전한 예입니다.

const json = { 
    "boundaries": { 
    "boundary": [{ 
     "boundaryId": "55083021003", 
     "boundaryType": "USA_CITY", 
     "boundaryRef": "C1" 
    }] 
    }, 
    "themes": [{ 
    "AssaultCrimeTheme": { 
     "boundaryRef": "C1", 
     "individualValueVariable": [{ 
     "name": "2013 Assault Crime", 
     "description": "Assault Crime for 2013", 
     "count": 18901 
     }, { 
     "name": "2014 Assault Crime", 
     "description": "Assault Crime for 2014", 
     "count": 17707 
     }] 
    } 
    }, { 
    "BurglaryCrimeTheme": { 
     "boundaryRef": "C1", 
     "individualValueVariable": [{ 
     "name": "2013 Burglary Crime", 
     "description": "Burglary Crime for 2013", 
     "count": 17743 
     }, { 
     "name": "2014 Burglary Crime", 
     "description": "Burglary Crime for 2014", 
     "count": 14242 
     }] 
    } 
    }] 
} 

// Create categories object in order filter duplicates 
const cats = {} 
const series = json.themes.map((o) => { 
    const key = Object.keys(o)[0] 
    return { 
    name: key, 
    data: o[key].individualValueVariable.map((o) => { 
     cats[o.name] = 1 
     return { category: o.name, y: o.count } 
    }) 
    } 
}) 

// Convert categories object to array 
const categories = Object.keys(cats) 

// Chart options 
const options = { 
    chart: {type: 'column'}, 
    xAxis: {categories: categories}, 
    series: series 
} 

// Create chart 
const chart = Highcharts.chart('container', options) 

console.log(series, categories) 

라이브 예 : 아래 https://jsfiddle.net/Lo323gq3/

출력 : 각 배열 값