Highcharts - 나는 변경하려고

Question

동적 클릭 라디오 버튼과 차트 유형을 변경 내 4 radio buttons 사용하여 차트의 다른 유형에 highcharts 작업 : column, bar, pie, line. 당신이 drilldown 열 유형 차트의 기본 유형이 될 것입니다 볼 수 있고 내가 사용자가 차트의 유형을 선택할 수있는 라디오 버튼을 추가 할 것처럼

$(function() {  


// Create the chart 

var options = { 
    chart: { 
     events: { 
      drilldown: function (e) { 
       if (!e.seriesOptions) { 

        var chart = this, 

         drilldowns = <?php echo json_encode($array) ?>, 
         series = drilldowns[e.point.name]; 

        // Show the loading label 
        chart.showLoading('Loading ...'); 

        setTimeout(function() { 
         chart.hideLoading(); 
         chart.addSeriesAsDrilldown(e.point, series); 
        }, 1000); 
       } 

      } 
     }, 
     plotBorderWidth: 0 
    }, 

    title: { 
     text: 'Chart Title', 
    }, 
    // 
    subtitle: { 
      text: 'Subtitle' 
    }, 
    // 
    xAxis: { 
      type: 'category', 
    }, 
    // 
    yAxis: { 

      title: { 
       margin: 10, 
       text: 'No. of user' 
      },  
    }, 
    // 
    legend: { 
     enabled: true, 
    }, 
    // 
    plotOptions: { 
     series: { 
      pointPadding: 0.2, 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true 
      } 
     }, 
     pie: { 
      plotBorderWidth: 0, 
      allowPointSelect: true, 
      cursor: 'pointer', 
      size: '100%', 
      dataLabels: { 
       enabled: true, 
       format: '{point.name}: <b>{point.y}</b>' 
      } 
     } 
    }, 
    // 
    series: [{ 
     name: 'Case', 
     colorByPoint: true, 
     data:data_array, 
    }], 
    // 
    drilldown: { 
     series: [] 
    } 
}; 

// Column chart 
options.chart.renderTo = 'container'; 
options.chart.type = 'column'; 
var chart1 = new Highcharts.Chart(options); 

}); 

:

여기 내 작업 도면이다. 그런 다음 차트가 주 계열 상태 일 때 "라인"라디오 버튼을 비활성화하고 드릴 다운 시리즈 상태 일 때 활성화합니다. 이 스크립트

function chartfunc() 
{ 
var column = document.getElementById('column'); 
var bar = document.getElementById('bar'); 
var pie = document.getElementById('pie'); 
var line = document.getElementById('line'); 

if(column.checked) 
    { 
     options.chart.renderTo = 'container'; 
     options.chart.type = 'column'; 
     var chart1 = new Highcharts.Chart(options); 
    } 
else if(bar.checked) 
    { 
     options.chart.renderTo = 'container'; 
     options.chart.type = 'bar'; 
     var chart1 = new Highcharts.Chart(options); 
    } 
else if(pie.checked) 
    { 
     options.chart.renderTo = 'container'; 
     options.chart.type = 'pie'; 
     var chart1 = new Highcharts.Chart(options); 
    } 
else 
    { 
     options.chart.renderTo = 'container'; 
     options.chart.type = 'line'; 
     var chart1 = new Highcharts.Chart(options); 
    } 

} 

가 가능 :

<input type="radio" name="mychart" class="mychart" id= "column" value="column" onclick= "chartfunc()">Column 
<input type="radio" name="mychart" class="mychart" id= "bar" value="bar" onclick= "chartfunc()">Bar 
<input type="radio" name="mychart" class="mychart" id= "pie" value="pie" onclick= "chartfunc()">Pie 
<input type="radio" name="mychart" class="mychart" id= "line" value="line" onclick= "chartfunc()">Line 

내가이 스크립트를 추가 : 여기

내 라디오 버튼입니까?

P. 당신은 또한 차트의 기본 제목을 볼 수 있듯이 내가 또한 원하는 동적 텍스트 상자를 사용하여 변경, '차트 제목'입니다 .. =)

Answer 1

DEMO

코드 :

$(function() {  


// Create the chart 

var options = { 
    chart: { 
     events: { 
      drilldown: function (e) { 
       if (!e.seriesOptions) { 

        var chart = this; 



        // Show the loading label 
        chart.showLoading('Loading ...'); 

        setTimeout(function() { 
         chart.hideLoading(); 
         chart.addSeriesAsDrilldown(e.point, series); 
        }, 1000); 
       } 

      } 
     }, 
     plotBorderWidth: 0 
    }, 

    title: { 
     text: 'Chart Title', 
    }, 
    // 
    subtitle: { 
      text: 'Subtitle' 
    }, 
    // 
    xAxis: { 
      type: 'category', 
    }, 
    // 
    yAxis: { 

      title: { 
       margin: 10, 
       text: 'No. of user' 
      },  
    }, 
    // 
    legend: { 
     enabled: true, 
    }, 
    // 
    plotOptions: { 
     series: { 
      pointPadding: 0.2, 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true 
      } 
     }, 
     pie: { 
      plotBorderWidth: 0, 
      allowPointSelect: true, 
      cursor: 'pointer', 
      size: '100%', 
      dataLabels: { 
       enabled: true, 
       format: '{point.name}: <b>{point.y}</b>' 
      } 
     } 
    }, 
    // 
    series: [{ 
     name: 'Case', 
     colorByPoint: true, 
     data: [3, 2, 1, 3, 4] 
    }], 
    // 
    drilldown: { 
     series: [] 
    } 
}; 

// Column chart 
options.chart.renderTo = 'container'; 
options.chart.type = 'column'; 
var chart1 = new Highcharts.Chart(options); 

chartfunc = function() 
{ 
var column = document.getElementById('column'); 
var bar = document.getElementById('bar'); 
var pie = document.getElementById('pie'); 
var line = document.getElementById('line'); 


if(column.checked) 
    { 

     options.chart.renderTo = 'container'; 
     options.chart.type = 'column'; 
     var chart1 = new Highcharts.Chart(options); 
    } 
else if(bar.checked) 
    { 
     options.chart.renderTo = 'container'; 
     options.chart.type = 'bar'; 
     var chart1 = new Highcharts.Chart(options); 
    } 
else if(pie.checked) 
    { 
     options.chart.renderTo = 'container'; 
     options.chart.type = 'pie'; 
     var chart1 = new Highcharts.Chart(options); 
    } 
else 
    { 
     options.chart.renderTo = 'container'; 
     options.chart.type = 'line'; 
     var chart1 = new Highcharts.Chart(options); 
    } 

} 

$('#change_chart_title').click(function(){ 
var new_title = $('#chart_title').val(); 
var chart = $('#container').highcharts(); 
chart.setTitle({ text: new_title }); 

alert('Chart title changed to '+new_title+' !'); 

}); 
    });