highcharts(数据可视化框架),ajax传递数据问题

摘要:
1.引入Highcharts注意用什么功能就按照官方引用对应的js˂scriptsrc="/js/Highcharts/cod

1.引入 Highcharts

注意用什么功能就按照官方引用对应的js

<%--highcharts视图js--%>
    <script src="/js/Highcharts/code/highcharts.js"></script>
    <script src="/js/Highcharts/code/highcharts-3d.js"></script>
    <script src="/js/Highcharts/code/modules/exporting.js"></script>
    <script src="/js/Highcharts/code/modules/oldie.js"></script>
    <script src="/js/Highcharts/code/modules/cylinder.js"></script>
<%--支持中文--%>    
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    

2.创建一个简单的图表

 <%--highcharts视图js表图--%>
 <div id="container1"style="44%;float: left"></div>
 <%--highcharts视图js圆圈图--%>
 <div id="container2"style="min-30%;height:400px;float: right"></div>
<script>
/*highcharts视图js表格图*/
    var chart1 = Highcharts.chart('container1', {
        chart: {
            type: 'cylinder',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 10,
                depth: 100,
                viewDistance: 50
            }
        },
        title: {
            text: '部门人数'
        },
        plotOptions: {
            series: {
                depth: 25,
                colorByPoint: true
            }
        },
        series: [{
            //seriesData是json数据
            data:seriesData,
            name: '部门人数',
            showInLegend: false
        }],
        xAxis:[{
            title: {
                enabled: true,
                text:"部门",
                style:"color:#000;"
            },
            categories:categories,
        }],
        yAxis:[{
            title: {
                enabled: true,
                text:"人数",
                style:"color:#000;"
            }
        }]
    })
    /*highcharts视图js圆圈图*/
    var chart2 = Highcharts.chart('container2', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            },
            400,
            height:400,
        },
        title: {
            text: '部门人员占比'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '部门人员占比',
            //seriesData是json数据
            data: seriesData
        }]
    }); 
</script>

3.用ajax来设置seriesData,categories的值(这就是翻车的地方,因为ajax的异步加载问题)

<script>
//highcharts视图的数据
    varseriesData =[];
    //highcharts视图的部门数据
    varcategories =[];
    //获取到highcharts视图的数据
    functionchartData() {
        $.ajax({
            url:'/employee/idxnd',
            type:'get',
            //必须设置成同步,不然categories赋不上值
async: false,
            success:function(data){
                seriesData=data;
                //设置部门categories数据
                for(vari = 0;i<data.length;i++){
                    categories.push(data[i][0]);
                }
            },
            error:function(error){
                console.log(error)
            }
        })
    }
    chartData();
</script>

4./employee/idxnd返回的数据格式

[
  [
    "IT部",
    53],
  [
    "采购部",
    33],
  [
    "销售部",
    37],
  [
    "人事部",
    4],
  [
    "售后部",
    1],
  [
    "运货部",
    3]
]

效果展示

highcharts(数据可视化框架),ajax传递数据问题第1张

免责声明:文章转载自《highcharts(数据可视化框架),ajax传递数据问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇js--定时器html 输入框只允许输入数字下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

iOS 结构化数据访问

一、介绍   在存储大量数据时,除了最基本的打开文件,读取文件,存盘等这些没有明确管理机制的方式来存储数据外,iOS还提供了另外几种重要的数据存储方式。虽然这些方式最后还是将数据存储在文件中,但是iOS以一套系统性有制度的方式来管理这些数据,让数据不再是“散乱”的存储在文件中。如此一来,我们很容易处理大量的数据,并且同时兼顾性能。最常用的有三种方式:   ...

uglifyjs压缩批处理

uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感。 uglifyjs压缩批处理我们不可能每次都打开cmd去键入压缩执行代码,容易写错不说(如上面那个结果图),还耗时,想想都会让人疯掉。懒人有懒法,花了点功夫,折腾了一个批处理文件,以后,想要压缩JS,只要双击运...

十七、SAP中使用SQL语句读取一条数据

一、需要说明的是SAP不同类型的结构体类型之间是不能随意赋值的,如果需要赋值,可以使用CORRESPONDING FIELDS OF关键字, 不同类型结构体中同名的成员会被赋值,代码如下: 二、输出代码如下 三、我们对比一下数据库 完美的取出了一条数据库。...

搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视图模型 V:视图,即浏览器最前端渲染的页面 M:模型,数据模型,就是后端页面渲染依赖的数据 VM:稍后再说,因为暂时还不知道怎么工作,什么场景,直接解释有...

JS toFixed 四舍六入五成双

以前一直以为toFixed就是四舍五入的方法,后来又有一段时间以为toFixed是五舍六入。今天终于写的时候,终于才知道toFixed是一个叫做四舍六入无成双的诡异的方法。。。 完全不明白为什么要这么写。。。 什么是四舍六入五成双:百度是这么说的: 对于位数很多的近似数,当有效位数确定后,其后面多余的数字应该舍去,只保留有效数字最末一位,这种修...

Apache Beam是什么?

  不多说,直接上干货! 以下是Apache Beam的官网 : https://beam.apache.org/ Apache Beam的前世今生       Apache Beam前身是Google Dataflow SDK,DataFlow是谷歌的提供大数据计算平台。在DataFlow之前,谷歌的批处理和流处理(流计算,实时处理)使用了不同系统,流...