通过点击单选按钮动态更改图表类型

通过点击单选按钮动态更改图表类型

本文介绍了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
正如你可以看到图表的默认标题是'图表标题',我也想动态地改变它使用文本框.. =)

解决方案



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 - 通过点击单选按钮动态更改图表类型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 18:45