jquery - 只有 x 轴上的整数在带有 angularjs 的流程图中刻度

标签 jquery angularjs charts flot

我正在将Flot图表AngularJs结合使用。我要求在 x 轴上仅显示整数,这已完成,但是当我添加低于 9 的最大值时,它会显示浮点值,例如 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

最佳答案

要强制显示 xaxis 值的整数,请设置 tickDecimals选项0:

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

这个JS Fiddle显示了 tickDecimals 的工作示例,其中对您的图表进行了小型重新创建。

关于jquery - 只有 x 轴上的整数在带有 angularjs 的流程图中刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39245489/

相关文章:

javascript - 如何在可调整大小的函数中获取X Y坐标?

jquery - 如何将另一个页面的图库加载到我页面上的 div 中?

javascript - angular.js 更新变量的结果

javascript - Angular 服务解耦

java - 饼图碧 Jade 中项目标签的不同颜色

jquery - 如何重新加载嵌入html页面的pdf

jquery - Rails Jquery 计算表中选定复选框的总计

python - 我想将 Python 模型列表转换为字典

javascript - 根据数据表中的 bool 条件更改 Google 图表时间线栏颜色

java - 对于不同的图表数据集,颜色不会改变