highcharts图表在渲染json格式的数据时候的问题-优快云博客

本文介绍使用Highcharts插件展示多组数据的趋势图方法。通过PHP生成JSON数据格式，并利用JavaScript进行图表绘制，实现不同数据系列的时间趋势展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

有一个需求，前端展现多个趋势图，选择了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对象，不然会有异常

转载于:https://my.oschina.net/wojibuzhu/blog/188223