有一个需求,前端展现多个趋势图,选择了highcharts插件图表,后端组装好json数据传给series。
数据格式如下:
array ( 84 => '[{ name:\'点击量\' ,data: [37,13,9,14,10,16,19,32,39,35,42,40,55,49,53,44,32,42,61,46,50,57,64,61] },{ name:\'UV\' ,data: [35,13,9,14,8,15,18,30,37,31,35,38,50,32,40,42,30,37,46,42,45,51,56,52] },{ name:\'广告语1\' ,data: [37,13,9,14,10,16,19,32,39,35,42,40,55,49,53,44,32,42,61,46,50,57,64,61] },{ name:\'广告语2\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语3\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语4\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语5\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语6\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语7\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语8\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语9\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] }]', 92 => '[{ name:\'点击量\' ,data: [2,3,5,3,1,7,5,6,12,5,2,2,7,7,2,8,2,1,13,12,7,6,5,10] },{ name:\'UV\' ,data: [2,3,4,3,1,7,5,6,11,5,2,2,7,5,2,7,2,1,12,12,7,6,5,10] },{ name:\'广告语1\' ,data: [2,1,3,3,0,4,1,4,7,3,2,2,6,4,0,4,2,1,10,7,5,5,4,5] },{ name:\'广告语2\' ,data: [0,2,2,0,1,3,4,2,5,2,0,0,1,3,2,4,0,0,3,5,2,1,1,5] },{ name:\'广告语3\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语4\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语5\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语6\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语7\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语8\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name:\'广告语9\' ,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] }]', )
前端js:
var arr = <?php echo $str ?>; $.each(arr, function(key, arrval) { $('#container'+key).highcharts({ title: { text: "<?php echo $bdate ?>广告数据小时趋势图", x: -20 //center }, subtitle: { text: "来源: ad3g.admin.ifeng.com;订单:<?php echo $dealName ?>" , x: -20 }, xAxis: { categories: ['00时','01时','02时','03时','04时','05时','06时','07时','08时','09时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'] }, yAxis: { title: { text: '点击 ' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '' }, series: eval(arrval) }); });
将传给series的数据evel转成json对象,不然会有异常