zoukankan      html  css  js  c++  java
  • 关于amcharts 双排column的学习

    最近在项目中要用到amcharts,而且要求显示形式为双column,现举例如下:

    function getPurchaseChart(){
    $.get("income",{"areaId":"","flag":"4"},function(chartData){
    $("#purchaseChartDiv").html("");
    YSZE = 0;
    ZXZE = 0;
    ZXWCL = 0.0;
    $.each(chartData,function(i,data){
    $.each(data,function(key,value){
    if(key=="YSZE"){
    YSZE += value;
    }else if(key=="ZXZE"){
    ZXZE += value;
    }
    });
    });
    ZXWCL = ZXZE/YSZE;
    $("#cgzb").html(YSZE);
    $("#cgzx").html(ZXZE);
    $("#cgzxwcl").html(ZXWCL);
    $("#purchaseChartDiv").html("");
    // SERIAL CHART
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "QXMC";
    chart.startDuration = 1;
    chart.colors = [ "#4470A5"];

    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 0;
    categoryAxis.gridPosition = "start";
    // GRAPH,显示预算总额信息
    var graph = new AmCharts.AmGraph();
    graph.valueField = "YSZE";
    graph.balloonText = "[[category]]: [[value]]";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 0.8;
    graph.addListener("clickGraphItem", getTown2);
    chart.addGraph(graph);
    // GRAPH,显示执行总额信息
    var graph1 = new AmCharts.AmGraph();
    graph1.valueField = "ZXZE";
    graph1.balloonText = "[[category]]: [[value]]";
    graph1.type = "column";
    graph1.lineAlpha = 0;
    graph1.fillAlphas = 0.8;
    graph1.addListener("clickGraphItem", getTown3);
    chart.addGraph(graph1);
    // LEGEND,定义图例信息
    legend = new AmCharts.AmLegend();
    legend.align = "center";
    legend.position = "right";
    legend.markerType = "square";
    legend.valueWidth = 25;
    legend.valueText = "[[close]]";
    legend.labelText = "预算总额";
    chart.addLegend(legend);
    // legend1 = new AmCharts.AmLegend();
    // legend1.align = "center";
    // legend1.position = "right";
    // legend1.markerType = "square";
    // legend1.valueWidth = 25;
    // legend1.valueText = "[[open]]";
    // legend1.labelText = "执行总额";
    // chart.addLegend(legend1);

    chart.write("purchaseChartDiv");
    });
    }

    其实就是添加两个GRAPH。

  • 相关阅读:
    css3——box-sizing属性
    HTML5存储--离线存储
    微信公众号爆出前端安全漏洞
    Js获取宽高度的归纳集锦总结
    Yii 2 修改 URL 模式为 PATH 模式,并隐藏index.php
    SQL 查询优化 索引优化
    linux提示语言包
    安装linux工作环境
    linux常用命令
    PHP解决抢购、秒杀、抢楼、抽奖等阻塞式高并发库存防控超量的思路方法
  • 原文地址:https://www.cnblogs.com/zhli/p/3061195.html
Copyright © 2011-2022 走看看