高图-动态更改图表类型与单选按钮点击
Highcharts - Dynamically change chart type with on radio buttons click
我试图改变我的工作highcharts
成不同类型的图表使用4 radio buttons
: column
, bar
, pie
, line
。
这是我的工作图表:
$(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);
});
正如你所看到的,drilldown
列类型将是图表的默认类型,我想添加一个单选按钮,用户可以在其中选择图表类型。然后我想禁用"LINE"单选按钮时,图表在主系列状态,启用它时,在钻取系列状态。
这些是我的单选按钮:
<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
我添加了这个脚本:
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);
}
}
这个脚本可能吗?
注:正如你所看到的,图表的默认标题是"图表标题",我也想用文本框动态地改变它。div =)
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+' !');
});
});
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时,jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 选中没有ID的单选按钮,只有名称、类型和值
- 输入类型单选按钮选中else语句在jquery中不起作用
- 如何在jsp中插入单选按钮、复选框和其他输入类型
- 单选按钮的 OnChange 事件处理程序(输入类型=“单选”)不能作为一个值工作
- 如何确定确切的元素类型/代码段,在现实世界的单选按钮的场景
- 具有单选按钮类型行为的复选框
- 高图-动态更改图表类型与单选按钮点击
- 禁用输入类型单选按钮点击从cs页面和发送警报用户使用js
- 无法找到输入类型单选按钮,我必须动态创建
- 在选定的单选按钮上,将文本字段类型更改为数字