Highcharts - 通过点击单选按钮动态更改图表类型 [英] Highcharts - Dynamically change chart type with on radio buttons click

查看：152
本文介绍了Highcharts - 通过点击单选按钮动态更改图表类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图使用 4个单选按钮：<$ c将我的工作 highcharts 更改为不同类型的图表$ c>列， bar ，馅饼，行。



以下是我的工作图： 

  $（function（）{
 
 
 //创建图表
 
 var options = {
图表：{
 events： {
 drilldown：function（e）{
 if（！e.seriesOptions）{
 
 var chart = this，
 
 drilldowns =< ;? php echo json_encode（$ array）？>，
 series = drilldowns [e.point.name]; 
 
 //显示加载标签
 chart.showLoading（'Loading ...'）; 
 
 setTimeout（function（）{
 chart.hideLoading（）; 
 chart.addSeriesAsDrilldown（e.point，series）; 
 }，1000）; 
} 
 
} 
}，
 plotBorderWidth：0 
}，
 
标题：{
 text： 'Chart Title'，
}，
 // 
字幕：{
 text：'Subtitle'
}，
 // 
 xAxis ：{
 type：'category'，
}，
 // 
 yAxis：{
 
 title：{
 margin：10， 
文字：'不。用户'
}，
}，
 // 
图例：{
启用：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>'
} 
} 
}，
 // 
系列：[{
 name：'Case'，
 colorByPoint：true，
 data：data_array，
 }]，
 // 
钻取：{
 series：[] 
} 
}; 
 
 //柱形图
 options.chart.renderTo ='container'; 
 options.chart.type ='column'; 
 var chart1 = new Highcharts.Chart（options）; 
 
}）;

您可以看到钻取列类型将是图表的默认类型，我想添加单选按钮，用户可以选择图表类型。然后，我想在图表处于主要系列状态时禁用LINE单选按钮，并在钻入系列状态时启用它。



以下是我的单选按钮： p> 

 < input type =radioname =mychartclass =mychartid =columnvalue =column onclick =chartfunc（）>列
< input type =radioname =mychartclass =mychartid =barvalue =baronclick =chartfunc（）> ; Bar 
< input type =radioname =mychartclass =mychartid =pievalue =pieonclick =chartfunc（）> Pie 
< input type =radioname =mychartclass =mychartid =linevalue =lineonclick =chartfunc（）> Line

我添加了这个脚本： 

  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）; 
} 
 
}

这个脚本有可能吗？

PS
正如你可以看到图表的默认标题是'图表标题'，我也想动态地改变它使用文本框.. =）

解决方案

DEMO



code： 

  $（function（）{
 
 
 //创建图表
 
 var options = {
图表：{
 events：{
 drilldown：function（e）{
 if （！e.seriesOptions）{
 
 var chart = this; 
 
 
 
 //显示加载标签
 chart.showLoading（ 'Loading ...'）; 
 
 setTimeout（function（）{
 chart.hideLoading（）; 
 chart.addSeriesAsDrilldown（e.point，series）; 
}，1000）; 
} 
 
} 
} ，
 plotBorderWidth：0 
}，
 
 title：{
 text：'Chart Title'，
}，
 // 
字幕：{
 text：'Subtitle'
}，
 // 
 xAxis：{
类型：'category'，
}，
 // 
 yAxis：{
 
标题：{
保证金：10，
 text：'否。用户'
}，
}，
 // 
图例：{
启用：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>'
} 
} 
}，
 // 
系列：[{
 name：'Case'，
 colorByPoint：true，
 data：[3，2，1 ，3，4] 
}]，
 // 
钻取：{
 series：[] 
} 
}; 
 
 //柱形图
 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）; 
 
 
 
 $ b $（'＃change_chart_title'）。click（function（）{
 var new_title = $（'＃chart_title'） .val（）; 
 var chart = $（'＃container'）。highcharts（）; 
 chart.setTitle（{text：new_title}）; 
 $ b $ alert（'图表标题已更改为'+ new_title +'！'）; 
 
}）; 
}）;


I am trying to change my working highcharts into different type of chart using 4 radio buttons: column, bar, pie, line.

Here is my working chart:

$(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);

});

As you can see a drilldown column type will be the default type of the chart and i want to add radio button where user can choose type of chart. Then I want to disable "LINE" radio button when the chart is in main series state and enable it when in drilldown series state.

Here are my radio buttons: 

  <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

the i add this script:

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);
    }

}

Is it possible with this script?

P.S. As you can see also the default title of chart is 'Chart Title', I want also to dynamically change it using textbox.. =)

解决方案

DEMO

code:

$(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+' !');

});
    });

这篇关于Highcharts - 通过点击单选按钮动态更改图表类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆