highchart 画图，datatable根据图中数值画表的demo

来源：互联网发布：中世纪攻城知乎编辑：程序博客网时间：2024/06/05 00:29

效果图：
这里写图片描述

html代码：

<div id="section1" >    <div id="container" style="height: 400px"></div>    <!--container画图的盒子 -->    <table id="maxmin" class="table table-hover table-condensed " cellspacing="0" width="100%">    <!--maxmin 统计数值的盒子 -->    </table></div>

javascript代码：

$.ajax({    url:"http://localhost:8088/demo2/page/tu04.json",    type:"get",    datatype:"json",    success:function con04(data){        var con04arr = new Array();        var option = new Object();          option.chart = new Object();          option.series = new Array();        var mmarr = new Array();           //新建数组存放计算出的每组最大值最小值// 绘图        for(i=0;i<data.data.length;i++){            con04arr[i] = new Array();            var disk = new Array();            disk[i] = new String();            var disknow = new Array();            for(j=0;j<data.data[0].length;j++){              con04arr[i][j] = parseFloat(data.data[i][j]);              option.series[i] = new Object();                option.series[i].data = con04arr[i];                            option.series[i].name = data.title[i];              var disknow = con04arr[i][data.data[i].length-1];                //当前值              var sum = 0;              sum = sum+parseInt(data.data[i][j]);            }             //计算每组data的最大值、最小值、平均值放进mmarr              var average = ""+parseInt(sum*data.data.length/data.data[i].length)+"";              var diskmax = ""+Math.max.apply(null, con04arr[i])+"";              var diskmin = ""+Math.min.apply(null, con04arr[i])+"";              mmarr[i] = [data.title[i],diskmax,diskmin,average,disknow];        }        option.chart.renderTo="container";           option.title={text:"磁盘使用率"};          option.legend={layout: 'vertical',align: 'right',verticalAlign: 'middle', borderWidth: 0};        var chart = new Highcharts.Chart(option);  //绘表         $("#maxmin").dataTable({              aaData: mmarr,              aoColumns:[              {sTitle:"name",sType: "file-size"},              {sTitle:"max",sType: "file-size"},              {sTitle:"min",sType: "file-size"},              {sTitle:"average",sType: "file-size"},              {sTitle:"now",sType: "file-size"}              ],              Rows:[{                Count:10              }],              ordering:false,              bPaginate: false,              bFilter: false,              bAutoWidth: false,              bInfo: false,              bLengthChange : true, // 改变每页显示数据数量             }).fadeIn(); //为表中每个name添加颜色        var color = ["#7CB5EC","#434348","#90ED7D","#F7A35C","#A0A3EE","#F15C80","#E4D354","#2B908F","#F45B5B","#91E8E1"];        var tdarr= $("#maxmin tbody tr");        for(i=0;i<tdarr.length;i++){            $("#maxmin tbody tr").eq(i).find("td:first").css("color",color[i]);            if(i>=10){                j=i%10;                color[i]=color[j];            $("#maxmin tbody tr").eq(i).find("td:first").css("color",color[i]);             }        }    }})

如果有什么问题或建议，欢迎留言……^^

0 0