• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    ExtJs纵坐标值重复问题的解决方法

    发布者: 怀卉1097 | 发布时间: 2025-8-13 19:25| 查看数: 84| 评论数: 0|帖子模式

    写在前面,版本库:Ext JS Library 3.3.1

    做图表的时候纵坐标很多值都是一样的,无意中发现下面的解决方法,自己测试是可以了,写出来以备后查,以便他人查看。其他版本没测试过。有兴趣的朋友可以自己测试。

    var chartStore;//图表数据
    Ext.onReady(function(){

    //使用当前服务器的文件,如果没有这句话,默认会去adobe的站点取
    Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf';

    var json_reader = new Ext.data.JsonReader( {
    idProperty : "pointName",
    root : 'rows',
    totalProperty : "results",
    fields : [ {
    name : 'pointName'
    }, {
    name : 'faultCount',
    type : "int"
    }]
    });

    //从后台取数据
    chartStore = new Ext.data.Store({
    proxy : new Ext.data.HttpProxy({
    url : 'loadColumnChart.do',
    method : 'POST'
    }),
    reader : json_reader
    });
    chartStore.reload();

    //柱状图面板
    var columnchartPanel = new Ext.Panel({
    border :false,
    autoScroll : true,
    //title : '设备测点故障记录统计图',
    frame : true,
    renderTo : document.body,
    width: 800,
    height: 240,
    layout : 'fit',
    items : {
    xtype : 'columnchart', // 类型
    store : chartStore,
    xField : 'pointName', // X轴取值
    yField : 'faultCount', // Y轴取值
    yAxis : new Ext.chart.NumericAxis({
    displayName : 'faultCount'
    //labelRenderer : Ext.util.Format.numberRenderer('0,0')//关键问题是这句,我把这句注释了就正常了
    }),
    tipRenderer : function(chart, record) {
    return record.data.pointName + '的故障次数为:' +
    Ext.util.Format.number(record.data.faultCount, '0,0');
    },
    series : [ {//列
    type : 'column', //类型可以改变(线)line
    displayName : 'faultCount',
    yField : 'faultCount',
    style : {
    color : 0x99BBE8
    }
    }]
    }
    });

    //柱状图面板
    var leftPanel = new Ext.Panel({
    title: '柱状图',
    region:'west',
    margins: '5 0 0 0',
    cmargins: '5 5 0 0',
    width: 850,
    minSize: 700,
    maxSize: 850,
    autoScroll:true,//设为true则内容溢出的时候产生滚动条,默认为false
    collapsible: true,//允许收缩
    items: columnchartPanel
    });

    });

    1.解决前:

    2.解决后:

    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    ×

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表