浅谈highcharts（echarts）通过ajax获取后台数据从而改变数据图

来源：互联网发布：网络金融销售是干嘛的编辑：程序博客网时间：2024/05/17 03:05

好久没写csdn博客了，随着工作项目的展开自己也越来懒了。。不过今天有点空余的时间，所以来写写博客。

恰巧这次的项目有图表这一块，所以就用到了highcharts和echarts。

我们都知道如果写纯静态的图表图很简单，那么如果写动态的图表图该如何写呢？

好了，不多BB了，言归正传！

1、引入图表所需要的js文件

    <script src="/App/AppV3/js/jquery.min.js" type="text/javascript"></script>    <script src="/App/AppV3/js/DeskTop/jquerysession.js" type="text/javascript"></script><!--这个是session.js文件，是我自己需要的-->    <script src="/App/AppV3/js/DeskTop/PryKPI.js" type="text/javascript"></script><!--自己的js文件-->    <script src="/App/AppV3/js/DeskTop/render_data.js" type="text/javascript"></script><!--自己的js文件-->    <script src="http://echarts.baidu.com/build/dist/echarts.js" type="text/javascript" ></script><!--通过cdn在线引入echarts-->    <script src="https://img.hcharts.cn/highcharts/highcharts.js" type="text/javascript" ></script><!--通过cdn在线引入highchats文件-->

2、先把纯静态的highcharts布局好（以highcharts为例）

//"签证变更"图表    var chart3 = Highcharts.chart('change_attestation', {        chart: {            type: 'column'        },        title: {            text: null        },        xAxis: {            categories: ['2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10']        },        yAxis: [{            title: {                text: '(元)'            }        }],        tooltip: {            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +            '<td style="padding:0"><b>{point.y:.1f} (元)</b></td></tr>',            footerFormat: '</table>',            shared: true,            useHTML: true        },        plotOptions: {            column: {                pointPadding: 0.2,                borderWidth: 0            }        },        labels: {            items: [{                style: {                    left: '300px',                    top: '-20px',                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'                }            }]        },        series: [{            name: '设计变更金额',            data: [200, 0, 0, 0, 0, 0],            color: 'deepskyblue'        }, {            name: '签证余额',            data: [100, 0, 0, 0, 0, 0],            color: 'orange'        }, {            type: 'spline',            name: '平均值',            data: [150, 0, 0, 0, 0, 0],            marker: {                lineWidth: 1,                lineColor: Highcharts.getOptions().colors[3],                fillColor: 'white'            }        }, {            type: 'pie',            name: '费用分析',            data: [{                name: '设计变更金额',                y: 200,                color: 'deepskyblue'            }, {                name: '签证余额',                y: 100,                color: 'orange'            }],            center: [10,10],            size: 60,            showInLegend: false,            dataLabels: {                enabled: false            }        }]    });

这段js代码我写在KPI.js文件里了

3、通过ajax动态获取后台数据赋值给图表中的data数据

这里我是通过button按钮选择项目，然后获取到对应的项目唯一ID，从而来获取项目对应的数据

//"签证变更"图表            $("#change_attestation").html("");            var chart3 = Highcharts.chart('change_attestation', {                chart: {                    type: 'column'                },                title: {                    text: null                },                xAxis: {                },                yAxis: [{                    title: {                        text: '(元)'                    }                }],                tooltip: {                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +            '<td style="padding:0"><b>{point.y:.1f} (元)</b></td></tr>',                    footerFormat: '</table>',                    shared: true,                    useHTML: true                },                plotOptions: {                    column: {                        pointPadding: 0.2,                        borderWidth: 0                    }                },                labels: {                    items: [{                        style: {                            left: '300px',                            top: '-20px',                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'                        }                    }]                },                series: [{                    name: '设计变更金额',                    color: 'deepskyblue'                }, {                    name: '签证余额',                    color: 'orange'                }, {                    type: 'spline',                    name: '平均值',                    marker: {                        lineWidth: 1,                        lineColor: Highcharts.getOptions().colors[3],                        fillColor: 'white'                    }                }, {                    type: 'pie',                    name: '费用分析',                    data: [{                        name: '设计变更金额',                        color: 'deepskyblue'                    }, {                        name: '签证余额',                        color: 'orange'                    }],                    center: [10,10],                    size: 60,                    showInLegend: false,                    dataLabels: {                        enabled: false                    }                }]            });            $.ajaxSettings.async = false;//关于这个求平均数问题，必须要把这个改成同步！！！否则出现想让人屎的bug！！！            $.getJSON("/App/AppV3/oa/DeskTop/PrjKPI.ashx?method=getCostSJList&PrjID=" + PrjId, function (data) {                var resp = data.rows;                var s1 = [];                for (var i = 0; i < resp.length; i++) {                    s1.push(resp[i].ChangeMoneySum)                }  //到这里我是通过ajax获取到项目图表所需要的data数据                $.session.set('cmSum', s1);  //这里是把设计变更金额数组作为sessionStorage缓存到浏览器端，便于待会的平均数求值                chart3.xAxis[0].setCategories([resp[0].Date, resp[1].Date, resp[2].Date, resp[3].Date, resp[4].Date, resp[5].Date]);//setCategories是把获取到的X轴数据添加到X轴上                chart3.series[0].update({                      data: [parseInt(resp[0].ChangeMoneySum), parseInt(resp[1].ChangeMoneySum), parseInt(resp[2].ChangeMoneySum), parseInt(resp[3].ChangeMoneySum), parseInt(resp[4].ChangeMoneySum), parseInt(resp[5].ChangeMoneySum)]                });//update是把获取到的图表数据添加到data数组中去            });            $.getJSON("/App/AppV3/oa/DeskTop/PrjKPI.ashx?method=getCostQZList&PrjID=" + PrjId, function (data) {                var resp = data.rows;                var s2 = [];                for (var i = 0; i < resp.length; i++) {                    s2.push(resp[i].ChkMoneySum)                }                $.session.set('chmSum', s2);                chart3.series[1].update({                    data: [parseInt(resp[0].ChkMoneySum), parseInt(resp[1].ChkMoneySum), parseInt(resp[2].ChkMoneySum), parseInt(resp[3].ChkMoneySum), parseInt(resp[4].ChkMoneySum), parseInt(resp[5].ChkMoneySum)]                });            });            var CMsum = $.session.get('cmSum');            var CHMsum = $.session.get('chmSum');            var cm = new Array();            var chm = new Array();            cm = CMsum.split(',');            chm = CHMsum.split(',');            chart3.series[2].update({                 data: [(parseInt(cm[0]) + parseInt(chm[0])) / 2, (parseInt(cm[1]) + parseInt(chm[1])) / 2,                        (parseInt(cm[2]) + parseInt(chm[2])) / 2, (parseInt(cm[3]) + parseInt(chm[3])) / 2,                        (parseInt(cm[4]) + parseInt(chm[4])) / 2, (parseInt(cm[5]) + parseInt(chm[5])) / 2]             });             chart3.series[3].update({                 data: [{'y':parseInt(cm[0])+parseInt(cm[1])+parseInt(cm[2])+parseInt(cm[3])+parseInt(cm[4])+parseInt(cm[5])},                        { 'y': parseInt(chm[0]) + parseInt(chm[1]) + parseInt(chm[2]) + parseInt(chm[3]) + parseInt(chm[4]) + parseInt(chm[5])}]             });

当我选择no：1的项目时图表为

当我选择no：2项目时图表为

结语：嗯，这就是我今天写的博客，有不严谨之处还望大神不惜赐教。

阅读全文

1 0