0

我能够用 30 个数据点绘制图表，并且所有点都显示在图表中。图表看起来很局促。我想以 5 的倍数显示数据点。假设我有 30 个点，我的图表应该有 [0, 5, 10, 15, 20, 25, 30] 作为轴点。从数学上讲，当我们绘制图表时说 1 个单位 = 5 个点。我不知道该怎么做。有人可以在查看方法时至少从文档中指出正确的方向。

var options = {
        series: {           
            lines: {
                show: true,
                lineWidth: 1,                   
                fillColor: {colors:[{opacity: 1},{opacity: 1}]}, 
                align: "right" 
            }           
       },
       grid: {
            show: true,
            markings: [{xaxis: {from: 0, to: 5}}]
       },      
       xaxis:{
            tickFormatter:timeTickFormatter,
            tickSize : 1
       },
       yaxis: { 
            max:24
       }
    };

function timeTickFormatter(val,axis) {

        var returnDate =new Array();    
        <% for (String dateValue: pasDays) { %>

            returnDate.push("<%= dateValue %>");

        <% } %>

        return returnDate[val];
    }

$(document).ready(function () {
        $.plot($("#HoursChart"), [ { label : "Work Hours", data: <%= workHrsDaily %>  },
                                                                  { label : "Idle Hours", data: <%= idleHrsDaily %> } ], options);

    });

更新：我将 tickSize 更改为 5，它显示 5 个数据点 :)！！

4

1 回答 1

2

很确定您可以执行以下操作：ticks: [0, 5, 10, 15, 20, 25, 30]

来自Flot API 文档：

如果要完全覆盖刻度算法，可以为“刻度”指定一个数组，如下所示：

滴答声：[0, 1.2, 2.4]

您可能需要删除该tickSize: 1属性，因为这会将刻度的间隔设置为 1。如果您将 设置tickSize为类似6（长度为 30），这将为您提供一个间隔5, 10, 15, 20, 25, 30

于 2012-10-23T15:19:24.913 回答