highchart如何动态设置renderTo的值

darlin_緢 2012-09-04 04:58:41
在用highchart控件时,希望能动态设置renderTo的值。

highchart的声明代码如下:

$(function () {
$(document).ready(function () {
colors = Highcharts.getOptions().colors,
categories = [];
name = 'Browser brands',
data = [];

chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories,
labels: {
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
cursor: 'pointer'
}
},
tooptip: {
formatter: function () {
return '' + this.x + "%%" + this.y + "";
}
},
series: []
});
});
});



在页面上,存在两个div,id分别是container和a


需求如下:有可能在container中显示图形,有可能在a中显示图形。。。



不知道怎么动态设置renderTo值。。。。。


...全文
328 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
sz_syy 2012-09-05
  • 打赏
  • 举报
回复
function Column_Pic() {

//渲染到区域
this.toDiv = "";
//图表标题
this.title = "";
this.data_content = "";

this.chart = null;

this.createPic = function () {
this.chart = new Highcharts.Chart({
chart: {
renderTo: this.toDiv,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: this.title
},
credits: {
//右下角的文本
enabled: false
},


tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) +' %';
}
}
}
},
series: this.data_content

});

}
}
这是封装成一个方法,把方法当成一个对象,里面的参数当作是对象的属性,在使用的时候,实例化这个对象
,用的时候很简单,给属性赋值,调用对象的方法
var test = new Column_Pic();

test.toDiv = "sssssss";
// test.title = "测试饼图";
test.data_content =
[{
type: 'pie',
name: 'test_pic',
data: strResult
, size: 150
// center:[180,80]
}];

test.createPic();
darlin_緢 2012-09-05
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

function Column_Pic() {

//渲染到区域
this.toDiv = "";
//图表标题
this.title = "";
this.data_content = "";

this.chart = null;

this.createPic = function () {
th……
[/Quote]


嗯 ,思想就是这样的。当一个对象,在ready中不加载,后面设置了属性后再加载。

我解决的代码如下:


var chart;
var colors;
var options;
$(function () {
$(document).ready(function () {
categories = [];
options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories,
labels: {
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
cursor: 'pointer'
}
},
tooptip: {
formatter: function () {
return '' + this.x + "%%" + this.y + "";
}
},
series: []
}
});
});




在后面需要用到的地方,直接修改相应的属性:


options.chart.renderTo = "statEff";
options.title.text = "多人绩效分数统计";
options.yAxis.title.text = "工作量(小时/人)";
chart = new Highcharts.Chart(options);


此时,就会存放在你指定的div里面。。。

格桑花 2012-09-04
  • 打赏
  • 举报
回复
renderTo: ($("#id").val())
试下这个

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧