请问,如何将JS的变量传递给highcharts中series:data,感觉都是基于JS,怎么就不行呢?

lgmsyy 2015-05-15 10:27:05
<script type="text/javascript">
//如何将temStr这个变量赋值给highcharts 的 series:data
var temStr = "[['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]]";

$(document).ready(function() {


function lgmway(lgm){


$('.chart-container22').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: '统计'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
credits: {
enabled: true,
text: ''
},
series: [{
type: 'pie',
name: '学历',
data:temStr
}]
});

}

});

</script>

data:$temStr
data:temStr
我都实验了,但是不行
...全文
10945 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
chentao01194691 2017-11-02
  • 打赏
  • 举报
回复
楼主怎么解决的啊,,遇到相同的问题,,按格式写好使,动态加载数据格式也是一样的就不好使,,把字符串转成对象也不好使
qq_24413027 2017-08-30
  • 打赏
  • 举报
回复
引用 12 楼 juewang_love 的回复:
加个设值的方法

 chart.series[0].setData(temStr);
    chart.xAxis[0].setCategories(dataStr);



thanks a lot
weikan9995 2017-03-15
  • 打赏
  • 举报
回复
data: eval(temStr) 这样才可以。这个方法可以,谢谢大神。
chengmuji352 2016-08-08
  • 打赏
  • 举报
回复
11楼可以,var msg=[1,2,3,5] ; data: eval(msg),,,,,, 完美解决
飞翔的飞起 2016-05-19
  • 打赏
  • 举报
回复
我刚好在做一个饼形图,你去掉var temStr = "[['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]]";后面的双引号就可以了,我就是这样做的,也能够正常显示。
dh_hui 2016-04-17
  • 打赏
  • 举报
回复 1
从JSON读过来的值需要转变为float类型 var data = new Array(); data.push(parseFloat(值)); 然后再series中写 data:data就没有问题了
丁垠午 2015-12-07
  • 打赏
  • 举报
回复
加个设值的方法

 chart.series[0].setData(temStr);
    chart.xAxis[0].setCategories(dataStr);



夜深游 2015-11-19
  • 打赏
  • 举报
回复
data: eval(temStr) 这样才可以。
jukelan 2015-10-19
  • 打赏
  • 举报
回复
楼主,data中的数据最好是整形,用函数parseInt(你的值),完全可以正常显示
shaodezheng 2015-09-25
  • 打赏
  • 举报
回复
将字符串转换为object
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
var obj = eval ("(" + txt + ")");
qq_30663059 2015-09-14
  • 打赏
  • 举报
回复
楼主解决了吗? 求答案呀,急用 谢谢了
supertanxing 2015-08-23
  • 打赏
  • 举报
回复
大神请问解决没有啊,我遇到一样的问题了
  • 打赏
  • 举报
回复
引用 4 楼 lgmsyy 的回复:
双引号去掉啊 不是字符串啊
  • 打赏
  • 举报
回复
引用 3 楼 lgmsyy 的回复:
我将插件需要的格式原封不动的写在变量temStr中,然后在data:strTemp中这样引用,结果是一样的啊

var dataStr=[2,2,3,12,3,3,3,1,2,0,3,3,2,3,1,1,2,2,2,8,10,4,5,7,4,2,1,0,2,3,0];
var temStr=["04-14","04-15","04-16","04-17","04-18","04-19","04-20","04-21","04-22","04-23","04-24","04-25","04-26","04-27","04-28","04-29","04-30","05-01","05-02","05-03","05-04","05-05","05-06","05-07","05-08","05-09","05-10","05-11","05-12","05-13","05-14"];
//如果上两行报错,就在加上引号

xAxis: {
    categories: dataStr//返回的日期数据
 },
 series: [{
    name: 'XXX',
    data: temStr//返回的值数据
}],
你试试上面的 替换对应部分
lgmsyy 2015-05-15
  • 打赏
  • 举报
回复
引用 3 楼 lgmsyy 的回复:
[quote=引用 2 楼 u011376884 的回复:] 你的temStr 不是插件要求的格式,插件不认,看清插件需要的格式再写
我将插件需要的格式原封不动的写在变量temStr中,然后在data:strTemp中这样引用,结果是一样的啊 <script type="text/javascript"> var temStr = "[['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]]"; $(document).ready(function() { var panel = navTab.getCurrentPanel(); var body = panel.find(".view-body"); var url = body.data("url"); var lgm = ""; $.ajax({ ... success: function(data) { ... var lgm = data lgmway(lgm); } }); function lgmway(lgm){ //$(lgm).each(function (i, item) { // //temStr=temStr+"['"+item.name+"',"+(i+10)+"],"; //}) //if(temStr.length>0){ //temStr="["+temStr.substring(0,temStr.length-1)+"]"; //alert(temStr); //} $('.chart-container22').highcharts({ chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: '统计' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, format: '{point.name}' } } }, credits: { enabled: true, text: '' }, series: [{ type: 'pie', name: '学历', //data: [['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]] data:temStr }] }); //alert(temStr); } }); </script> [/quote] 如果我直接data:[['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]]就没有问题; 如果我将 "[['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]]"赋给变量temStr这个变量。再data:temStr 就不行。插件中的格式,和我写的格式应该是一样的啊。否则为什么直接写就可以呢?
lgmsyy 2015-05-15
  • 打赏
  • 举报
回复
引用 2 楼 u011376884 的回复:
你的temStr 不是插件要求的格式,插件不认,看清插件需要的格式再写
我将插件需要的格式原封不动的写在变量temStr中,然后在data:strTemp中这样引用,结果是一样的啊 <script type="text/javascript"> var temStr = "[['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]]"; $(document).ready(function() { var panel = navTab.getCurrentPanel(); var body = panel.find(".view-body"); var url = body.data("url"); var lgm = ""; $.ajax({ ... success: function(data) { ... var lgm = data lgmway(lgm); } }); function lgmway(lgm){ //$(lgm).each(function (i, item) { // //temStr=temStr+"['"+item.name+"',"+(i+10)+"],"; //}) //if(temStr.length>0){ //temStr="["+temStr.substring(0,temStr.length-1)+"]"; //alert(temStr); //} $('.chart-container22').highcharts({ chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: '统计' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, format: '{point.name}' } } }, credits: { enabled: true, text: '' }, series: [{ type: 'pie', name: '学历', //data: [['专科及以下',0],['本科',75],['研究生',15],['博士及以上',10]] data:temStr }] }); //alert(temStr); } }); </script>
  • 打赏
  • 举报
回复
你的temStr 不是插件要求的格式,插件不认,看清插件需要的格式再写
lgmsyy 2015-05-15
  • 打赏
  • 举报
回复
这个应该是语法问题,有谁用过,一定能很快知道。谢谢了。
在这个科技高速发展的时代,经历了PC时代几乎人手一台电脑,随之衍生出站长这个概念;移动互联网时代几乎人手一部智能手机,智能手机一般都会安装很多应用,目前应用呈爆发式的增长;随着产业的不断深入发展,小程序的发展也日益壮大,应用涵盖各个领域;如今一个公司就可能有多个软件应用,对于软件开发商来说,急需一套分析系统帮助软件运营,如果单独开发一个分析系统去针对一个软件进行分析的话,成本会非常的大,这个成本包含开发成本以及以后的维护成本。为了解决了上述的问题,我们开发出了一套云产品:亿级动态数据统计分析系统,本系统可以支持所有的终端  (Web端、移动端、小程序端等 )数据统计,只要简单的使用sdk就可以接入我们的系统,软件开发商可以很轻松的对软件使用的情况进行监控,及时辅助公司对该软件的运营。该产品历经2年的实践,商业价值极高。本套案例是完全基于真实的产品进行开发和讲解的,同时对架构进行全面的升级,采用了全新的 Flink 架构+Node.js+Vue.js等,完全符合目前企业级的使用标准。对于本套课程在企业级应用的问题,可以提供全面的指导。Flink作为第四代大数据计算引擎,越来越多的企业在往Flink转换。Flink在功能性、容错性、性能方面都远远超过其他计算框架,兼顾高吞吐和低延时。Flink能够基于同一个Flink运行时,提供支持流处理和批处理两种类型应用的功能。也就是说同时支持流处理和批处理。Flink将流处理和批处理统一起来,也就是说作为流处理看待时输入数据流是无界的;批处理被作为一种特殊的流处理,只是它的输入数据流被定义为有界的。Flink技术特点1. 流处理特性支持高吞吐、低延迟、高性能的流处理支持带有事件时间的窗口(Window)操作支持有状态计算的Exactly-once语义支持高度灵活的窗口(Window)操作,支持基于time、count、session,以及data-driven的窗口操作支持具有Backpressure功能的持续流模型支持基于轻量级分布式快照(Snapshot)实现的容错一个运行时同时支持Batch on Streaming处理和Streaming处理Flink在JVM内部实现了自己的内存管理支持迭代计算支持程序自动优化:避免特定情况下Shuffle、排序等昂贵操作,间结果有必要进行缓存2. API支持对Streaming数据类应用,提供DataStream API对批处理类应用,提供DataSet API(支持Java/Scala)3. Libraries支持支持机器学习(FlinkML)支持图分析(Gelly)支持关系数据处理(Table)支持复杂事件处理(CEP)4. 整合支持支持Flink on YARN支持HDFS支持来自Kafka的输入数据支持Apache HBase支持Hadoop程序支持Tachyon支持ElasticSearch支持RabbitMQ支持Apache Storm支持S3支持XtreemFS课程所涵盖的知识点包括:Flink、 Node.js、 Vue.js、 Kafka、Flume、Spring、SpringMVC、Dubbo、HDFS、Hbase、Highcharts等等  企业一线架构师讲授,代码在老师指导下可以复用,提供企业解决方案。  版权归作者所有,盗版将进行法律维权。   

52,797

社区成员

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

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