zoukankan      html  css  js  c++  java
  • highcharts中series带参数的赋值问题

    需要得到的代码如下:

    series: [{name: '棒号1',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, {name: '棒号2',data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, {name: '棒号3',data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, {name: '棒号4',data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}]

            这边的data中的值全部都是数组,而我在后台处理过程中最多可以将每个数组中的数据用json传到js中,这样遇到一个问题,就是json传过去的数据为字符串类型而series中data需要的是数组。

    参照了网上的很多例子(说句真的,网上的例子真的不多,而且几乎都是一样的),如:

    //例子1

    <!DOCTYPE HTML>
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Highcharts Example</title>
      
      
      <!-- 1. Add these JavaScript inclusions in the head of your page -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <script type="text/javascript" src="../js/highcharts.js"></script>
      
      <!-- 1a) Optional: add a theme file -->
      <!--
       <script type="text/javascript" src="../js/themes/gray.js"></script>
      -->
      
      <!-- 1b) Optional: the exporting module -->
      <script type="text/javascript" src="../js/modules/exporting.js"></script>
      
      
      <!-- 2. Add the JavaScript to initialize the chart on document ready -->
      <script type="text/javascript">
      
       /**
        * Visualize an HTML table using Highcharts. The top (horizontal) header
        * is used for series names, and the left (vertical) header is used
        * for category names. This function is based on jQuery.
        * @param {Object} table The reference to the HTML table to visualize
        * @param {Object} options Highcharts options
        */
       Highcharts.visualize = function(table, options) {
        // the categories
        options.xAxis.categories = [];
        $('tbody th', table).each( function(i) {
         options.xAxis.categories.push(this.innerHTML);
        });
        
        // the data series
        options.series = [];
        $('tr', table).each( function(i) {
         var tr = this;
         $('th, td', tr).each( function(j) {
          if (j > 0) { // skip first column
           if (i == 0) { // get the name and init the series
            options.series[j - 1] = {
             name: this.innerHTML,
             data: []
            };
           } else { // add values
            options.series[j - 1].data.push(parseFloat(this.innerHTML));
           }
          }
         });
        });
        
        var chart = new Highcharts.Chart(options);
       }
        
       // On document ready, call visualize on the datatable.
       $(document).ready(function() {   
        var table = document.getElementById('datatable'),
        options = {
            chart: {
               renderTo: 'container',
               defaultSeriesType: 'column'
            },
            title: {
               text: 'Data extracted from a HTML table in the page'
            },
            xAxis: {
            },
            yAxis: {
               title: {
                  text: 'Units'
               }
            },
            tooltip: {
               formatter: function() {
                  return '<b>'+ this.series.name +'</b><br/>'+
                     this.y +' '+ this.x.toLowerCase();
               }
            }
         };
        
                  
        Highcharts.visualize(table, options);
       });
        
      </script>
      
     </head>
     <body>
      
      <!-- 3. Add the container -->
      <div id="container" style=" 800px; height: 400px; margin: 0 auto"></div>
      
      
      <table id="datatable">
       <thead>
        <tr>
         <th></th>
         <th>Jane</th>
         <th>John</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <th>Apples</th>
         <td>3</td>
         <td>4</td>
        </tr>
        <tr>
         <th>Pears</th>
         <td>2</td>
         <td>0</td>
        </tr>
        <tr>
         <th>Plums</th>
         <td>5</td>
         <td>11</td>
        </tr>
        <tr>
         <th>Bananas</th>
         <td>1</td>
         <td>1</td>
        </tr>
        <tr>
         <th>Oranges</th>
         <td>2</td>
         <td>4</td>
        </tr>
       </tbody>
      </table>
      
       
     </body>
    </html>

            这个方法是先将需要读取的数据写在页面上,然后直接读取页面上的数据就可以了,但是不同项目的具体需求不净相同,我做的项目不可能在页面加载时就取到所需要的数据。没办法用了个最笨的办法,就是一个一个的赋值,这样效率是不咋地,还好每次只查询最多3条数据。

           如果哪位大侠看到我这篇拙文,并且有更好的解决办法,还请赐教啊,本人不胜感激,QQ:848342187

    附(我的解决代码):

     //js定义二维数组
        var treeCol = new Array();
            for (var i = 0; i < 15; i++) {
                //二维数组赋值
                treeCol[i] = new Array();
                for (var j = 0; j < count; j++) {
                    treeCol[i][j] = 0;
                }
            }

     series: [

    //省略相同代码
            {

                      name:'棒号2',

                     data: (function () {
                    return treeCol[1] == undefined ? 0 : treeCol[1];
                })()
            }, {

                name:'棒号1',
                data: (function () {
                    return treeCol[0] == undefined ? 0 : treeCol[0];
                })()
            }]

  • 相关阅读:
    严蔚敏数据结构线性表操作
    strcpy/strncpy、strcat/strncpy的替代方案strlcpy,strlcat
    使用DNS的反向区域,解决通过IP反向查询主机名,适合web环境通过IP定位故障主机名
    FreeBSD漏洞程序升级
    定义制造业操作(定义 MES/MOM 系统)
    定义制造业操作(定义 MES/MOM 系统)
    EF / EF CORE 打印SQL
    远程连接桌面Azure AD(Azure AD Joined Computer)
    《精通CSS第3版》(6)Flexbox
    FastNat内网穿透,给开发人员送的硬货福利限时送
  • 原文地址:https://www.cnblogs.com/QiuJL/p/4524225.html
Copyright © 2011-2022 走看看