Question

我正在使用flot和jquery库来生成单分子衰变图。无论如何，我能够以秒为单位显示所有值，但我的主管希望图表在必要时调整大小。必要时必须将其调整为分钟和小时，并且必要时必须调整大小。目前，我有一个支持多个数据集的图，如果我重新调整所有数据的x值，当我需要重新标记图时，它似乎不实用。当我获得10点声望时，我会发布我的情节图像，因为我刚刚创建了我的帐户。我认为可以使用flot的选项部分手动调整x刻度标签，但我不知道在这种情况下如何判断何时调整x轴的大小。如果有人可以请求帮助，我将非常感谢任何意见！

我已经开始使用此功能，至于在达到数小时后重新调整大小，我相信我会使用maxX＆lt; 1以及xAxisLabel的条件。我不确定这是否是最好的方法。它似乎不是。

我会在gatherData（）中调用此函数。 gatherData（）计算0到maxX范围内的1000个x值的y坐标，并返回格式为{data：XYCoords，lines：{show：true}，color：“foo”，label：“bar”}的系列。

function convertXAxisUnits(xData){
   if (maxX >= 60 && $("#xAxisLabel").innerHTML == "Time(seconds)")
   {
      for (var i = 0; i < xData.length; i++)
      {
         xData[i] /= 60.0;
      }
      maxX /= 60.0;
      $("#xAxisLabel").innerHTML = "Time(minutes)";
   }
   if (maxX >= 60 && $("#xAxisLabel").innerHTML == "Time(minutes)") 
   {
      for (var i = 0; i < xData.length; i++)
      {
         xData[i] /= 60.0;
      }
      maxX /= 60.0;
      $("#xAxisLabel").innerHTML = "Time(hours)";
   }
   //add in conversion going from hours to minutes to seconds
}

function refreshGraph(){
   var options;                                       //graphing options   
   var logarithmic;                                   //option for logarithmic graphing (BOOL)

   dataSets = [];
   maxValue = 0;                                      
   maxX = 0;

   checkForNullValues();
   computeMaxXValue();                                

   if (document.getElementById("switch1").name == "on")                 //push data series 1
   {
      dataSets.push(gatherData("kValue1", "a0Value1"));
   }
   if (document.getElementById("switch2").name == "on")                 //push data series 2
   {
      dataSets.push(gatherData("kValue2", "a0Value2"));
   }
   if (document.getElementById("switch3").name == "on")                 //push data series 3
   {
      dataSets.push(gatherData("kValue3", "a0Value3"));
   }
   if (document.getElementById("switch4").name == "on")                 //push data series 4
   {
      dataSets.push(gatherData("kValue4", "a0Value4"));
   }

   options = {
      yaxis: {max: maxValue},
      grid: {hoverable: true, clickable: true},
      legend: {show: false}
   };

   chart = $.plot($("#panel"), dataSets, options);                      //plot all data series
}

Answer 1

您可以使用tickFormatter选项而不是更改数据，而只更改轴/刻度：

function convertXAxisUnits(xData){
    if (maxX >= 3600) {
        $("#xAxisLabel").html("Time(hours)");
        options.xaxis.tickFormatter: function (value, axis) {
            return value / 3600;
        }
    }
    else if (maxX >= 60) {
        $("#xAxisLabel").html("Time(minutes)");
        options.xaxis.tickFormatter: function (value, axis) {
            return value / 60;
        }
    }
    else {
        $("#xAxisLabel").html("Time(seconds)");
        options.xaxis.tickFormatter: function (value, axis) {
            return value;
        }
    }
}

有关详细信息，请参阅documentation。

如何使用flot重新标记与时间相关的轴？

1 个答案: