代码之家  ›  专栏  ›  技术社区  ›  Jigarb1992

在带有angularjs的浮动图表中,仅x轴刻度中的整数

  •  2
  • Jigarb1992  · 技术社区  · 10 年前

    我正在使用 Flot chart 具有 AngularJs .我只需要显示 integer x轴上的数字,已完成,但当我将最大值添加到9以下时,它会显示 float 值类似于1.0、3.0、5.0,当我添加的最大值超过9时,它会正确显示 整数 数字,如1、5、10。

    我使用的代码:

            var yaxesMax = parseInt(data['b']) > parseInt(data['a']) ? (parseInt(data['b']) + 5) : (parseInt(data['a']) + 5) ;
           var diagramData = [
                           [0, data['a']],   //0 A Wert
                           [data['c'], data['a']],     //A zu C
                           [data['d'], data['b']], //C zu D
                           [data['e'], data['b']],  //D zu E
                           [data['f'], 0], // E zu F
                        ]
            var multiOptions = {
                axisLabels: {
                    show:true,
                },
                xaxes: [
                    {
                      ticks: [data['c'],data['d'],data['e'],data['f']],
                      min: 0,
                      max: data['f']
                    }
                ],
                yaxes: [
                    {
                      min: 0,
                      max: yaxesMax
                    },
    
                ],
                grid: {
                  hoverable: true
                },
                tooltip: true,
                tooltipOpts: {
                   content: function(label, xval, yval, flotItem) {
                        x = new Date(xval);
                        shortTime = x.getHours() + ':' + x.getMinutes();
                        return 'Day ' + xval + '  | ' + yval + ' ' + label;
                    },
                    onHover: function (flotItem, $tooltipEl) {
                    }
                }
            };
            //Ende MultiOptions
    
            vmCurvesTaxi.flotMultiData = [
                {
                    data:  diagramData,
                    points: {
                        show: true,
                    },
                    lines: {
                        show:true,
                        lineWidth: '3'
                    },
                    //label:  $rootScope.getEinheiten($rootScope.GlobalData.config.volumemessurement)
                },
    
            ];
    
            vmCurvesTaxi.flotMultiOptions = multiOptions;
    



    在9以下添加最大值: enter image description here



    添加大于9的最大值: enter image description here

    1 回复  |  直到 10 年前
        1
  •  2
  •   mechenbier    10 年前

    要强制显示 xaxis 值,设置 tickDecimals 选项到 0 :

    var options = {
        xaxis: {
            min: 0,
            tickDecimals: 0
        }
    }
    

    这 JS Fiddle tick小数