highcharts中用<%=%>获得一个数组，如何将该数组赋给data呀？？？？？

Posted 2023-04-24

何必用小脚本呢，直接通过json返回给页面，页面上取出JSON就好了。

给一点代码片段给你

var childObj = 


getQueTotal:function()

$.ajax(
type:"post",
url:contextPath+"/elispay!getQueTotal.do",
dataType:"json",
success:function(result)

var json = $.parseJSON(result);
childObj.fillConsumerData(json.xData,json.workData,json.telData,'child-1');
,
error:function(data)



    );
    ,
    fillConsumerData : function(xData,workData,telData,child_id)


var chart;
    $(document).ready(function() 
        chart = new Highcharts.Chart(
            chart: 
                renderTo: child_id,
                type: 'column',
                backgroundColor: '#fff',
                plotBorderWidth:1,
                plotBorderColor:'gray',
margin:[10,10]
            ,
            title: 
                text: ''
            ,
            xAxis: 
                categories: xData,
                labels: 
                    rotation: -45,
                    align: 'right',
                    color:'#bbb',
                    style: 
                        fontSize: '13px',
                        fontFamily: 'Microsoft YaHei,Verdana, sans-serif'
                    
                
            ,
            yAxis: 
                min: 0,
                title: 
                    text: ''
                
            ,
            legend: 
             align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            ,
                series: [
                name: '工作平台',
                data: workData,
                color:'#86c021',
                dataLabels: 
                    enabled: true,
                    rotation: -0,
                    color: '#3c3c3c',
                    align: 'center',
                    x: 0,
                    y: -10,
                    formatter: function() 
                        return this.y;
                    ,
                    style: 
                        fontSize: '13px',
                        fontFamily: 'Microsoft YaHei,Verdana, sans-serif'
                      
                    
                
            ,
name: '手机平台',
                data: telData,
                color:'#4572a7',
                dataLabels: 
                    enabled: true,
                    rotation: -0,
                    color: '#3c3c3c',
                    align: 'center',
                    x: 0,
                    y: -10,
                    formatter: function() 
                        return this.y;
                    ,
                    style: 
                        fontSize: '13px',
                        fontFamily: 'Microsoft YaHei,Verdana, sans-serif'
                       
                    
                
]
        );
    );

    

参考技术A 直接 data: <%= [1,2,3] %>这不就行了

highcharts

简单条形图用法：

1 <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
2 <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>

图的容器：

1 <div id="container" style="min-width:400px;height:400px"></div>

js代码：

 1 <script>
 2     $(function () {
 3     $(\'#container\').highcharts({
 4         chart: {
 5             type: \'bar\'
 6         },
 7         title: {
 8             text: \'各洲不同时间的人口条形图\'
 9         },
10         subtitle: {
11             text: \'数据来源: Wikipedia.org\'
12         },
13         xAxis: {
14             categories: [\'非洲\', \'美洲\', \'亚洲\', \'欧洲\', \'大洋洲\'],
15             title: {
16                 text: null
17             }
18         },
19         yAxis: {
20             min: 0,
21             title: {
22                 text: \'人口总量 (百万)\',
23                 align: \'high\'
24             },
25             labels: {
26                 overflow: \'justify\'
27             }
28         },
29         tooltip: {
30             valueSuffix: \' 百万\'
31         },
32         plotOptions: {
33             bar: {
34                 dataLabels: {
35                     enabled: true,
36                     allowOverlap: true
37                 }
38             }
39         },
40         legend: {
41             layout: \'vertical\',
42             align: \'right\',
43             verticalAlign: \'top\',
44             x: -40,
45             y: 100,
46             floating: true,
47             borderWidth: 1,
48             backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || \'#FFFFFF\'),
49             shadow: true
50         },
51         credits: {
52             enabled: false
53         },
54         series: [{
55             name: \'1800 年\',
56             data: [107, 31, 635, 203, 2]
57         }, {
58             name: \'1900 年\',
59             data: [133, 156, 947, 408, 6]
60         }, {
61             name: \'2008 年\',
62             data: [973, 914, 4054, 732, 34]
63         }]
64     });
65 });
66 </script>

效果：