Hightchart 변화 디자인과 기능

Question

내가 차트 application.i을 높이 만들려고 몇 가지 코드를 작성하고 난이이 파트 내 코드

입니다

http://jsfiddle.net/gkatsarava/Zp3au/1/ 

내 소스 코드 hightchart like this

을 recived

$(function() { 
Highcharts.setOptions({ 
      colors: ['#05D3F8', '#D1E751', '#25E4BC', '#F3D915', '#FF7E00', '#FF0C96', '#F100F3']}); 

    $('#container').highcharts({ 

     chart: { 
      backgroundColor: 'transparent' 
     }, 
     title: { 
      text: '' 
     }, 
     exporting: { 
     enabled: false 
     }, 

     xAxis: { 
      categories: ['XXXX', 'XXXX', 'XXXX'], 
      labels: { 
      style: { 
       fontSize:'10px' 
      } 
      } 
     }, 
     yAxis: { 
      title: {text: 'TEXT - TEXT'}, 
      plotLines:[{ 
      value : 80, 
      color: 'red', 
        dashStyle: 'shortdash', 
        width: 2, 
     }], 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:13px;color:{series.color}">{series.name}</span><br>', 
      pointFormat: "valuess: {point.y:.2f}%" 

     }, 
     legend: { 
       enabled: false, 
     }, 
     labels: { 

     }, 
     plotOptions: { 
     column: { 
      dataLabels: { 
       enabled: true, 
       useHTML: true, 
       formatter: function() { 

       } 
      } 
     }, 
     series: { 
     } 
    }, 
     series: [{ 
      type: 'column', 
      name: 'XXXX', 
      data: [10], 
      id:'1' 
     }, { 
      type: 'column', 
      name: 'XXXX', 
      data: [40], 
      id:'2' 
     }, { 
      type: 'column', 
      name: 'XXXX', 
      data: [80], 
      id:'3' 
     }] 
    }, function (chart) { 

    // bind events to your own custom legend 
    $('#my-legend').on('click', 'div', function (e) { 
    var el = e.target, 
     id = el.getAttribute('data-id'), 
     series = chart.get(id); 

    series.setVisible(!series.visible); 
    }); 
}); 
}); 

나는 세 개의 차트를 가지고 있으며이 모든 차트를 하나의 단위로 통합하고자합니다. 아무도 경험 hightchart 제발 도와주세요.이 문제를 어떻게 해결했는지 모르겠다. 감사합니다.

Answer 1

나는 "단위"차트를 의미하는 것이 확실치 않지만, Highcharts 문서는 멋진 예제로 가득합니다. 과 같은 것을 원하십니까? 그것은 아주 간단합니다. 예제와 같이 시리즈를 만들어야합니다.

편집 :Here은 데이터를 조작하는 것입니다.

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Example' 
     }, 
     colors: ['#05D3F8', '#D1E751', '#25E4BC'], 
     xAxis: { 
      categories: ['X', 'Y', 'Z'] 
     }, 
     series: [{ 
      name: 'Blue', 
      data: [10, 10, 10] 

     }, { 
      name: 'Yellow', 
      data: [40, 40, 40] 

     }, { 
      name: 'Green', 
      data: [80, 80, 80] 

     }] 
    }); 
});