Javascript Highcharts-通过单击单选按钮动态更改图表类型

我正在尝试使用

4个单选按钮
将我的工作
图表
更改为不同类型的图表
：
列
，
条
，
饼图
，
行

这是我的工作表：

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

}

这个脚本可以吗

附言。
正如您所看到的，图表的默认标题是“图表标题”，我还想使用textbox动态更改它….=）
 

代码：

$（函数（）{
//创建图表
变量选项={
图表：{
活动：{
向下展开：函数（e）{
如果（！e.系列选项）{
var图表=此；
//显示加载标签
图表.显示加载（'加载…'）；
setTimeout（函数（）{
chart.hideLoading（）；
图表.添加系列向下倾斜（e.点，系列）；
}, 1000); 
}
}
},
绘图边框宽度：0
},
标题：{
文本：“图表标题”，
},
//
副标题:{
文字：“字幕”
},
//
xAxis：{
类型：'类别'，
},
//
亚克斯：{
标题：{
差额：10，
文本：“用户数量”
},      
},
//
图例：{
启用：对，
},
//
打印选项：{
系列：{
点填充：0.2，
边框宽度：0，
数据标签：{
已启用：true
}
},
馅饼：{
绘图边框宽度：0，
allowPointSelect:true，
光标：“指针”，
大小：“100%”，
数据标签：{
启用：对，
格式：'{point.name}:{point.y}'
}
}
},
//
系列：[{
名称：'案例'，
colorByPoint：对，
数据：[3,2,1,3,4]
}],
//
向下展开：{
系列：[]
}
};
//柱状图
options.chart.renderTo='container'；
options.chart.type='column'；
var chart1=新的Highcharts.图表（选项）；
chartfunc=函数（）
{
var column=document.getElementById（'column'）；
var bar=document.getElementById（'bar'）；
var pie=document.getElementById（'pie'）；
var line=document.getElementById（'line'）；
如果（选中列）
{
options.chart.renderTo='container'；
options.chart.type='column'；
var chart1=新的Highcharts.图表（选项）；
}
否则，如果（条形图已选中）
{
options.chart.renderTo='container'；
options.chart.type='bar'；
var chart1=新的Highcharts.图表（选项）；
}
else if（饼图选中）
{
options.chart.renderTo='container'；
options.chart.type='pie'；
var chart1=新的Highcharts.图表（选项）；
}
其他的
{
options.chart.renderTo='container'；
options.chart.type='line'；
var chart1=新的Highcharts.图表（选项）；
}
}
$（“#更改_图表_标题”）。单击（函数（）{
var new_title=$（'#chart_title'）.val（）；
var chart=$（“#容器”）.highcharts（）；
chart.setTitle（{text:new_title}）；
警报（“图表标题更改为“+新标题+”！”）；
});
});
nice。。如果“行”单选按钮处于主系列状态，我将如何禁用它？如果处于深入系列状态，我将如何启用它？如果我更改图表标题的文本，图表是否可能不重新加载。。对不起，问题太多了……=）谢谢，我已经更新了我的代码。更改标题时，图表将不会重新加载。我不确定向下搜索时如何禁用单选按钮。请考虑接受答案！哦，对不起。。我已经更新了你给我的JSFIDLE。。当处于深入系列状态时，当我更改图表类型时，它将返回到主系列状态。很高兴帮助您！：）
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);
    }

}

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

});
    });