Контуры флота с осью и всплывающие подсказки?

Question

Я работаю над приложением, где я пытаюсь построить аналогичный график для того, что изображено на Open Weather. Я использую библиотеку FlotJS для запроса их API и построения графиков.

Вот мой код. Прошу прощения за многословие.

/* 
* RUN PAGE GRAPHS 
*/ 

// load all flot plugins 
loadScript("js/plugin/flot/jquery.flot.cust.min.js", function(){ 
    loadScript("js/plugin/flot/jquery.flot.resize.min.js", function(){ 
     loadScript("js/plugin/flot/jquery.flot.time.min.js", function(){ 
      loadScript("js/plugin/flot/jquery.flot.tooltip.min.js", generatePageGraphs); 
     }); 
    }); 
}); 

function generatePageGraphs(){ 
    var fetchWeatherUrl = '//api.openweathermap.org/data/2.5/forecast?lat=' + farmLat + '&lon=' + farmLng; 

    $.ajax({ 
     method: 'get', 
     dataType: "jsonp", 
     url: fetchWeatherUrl, 
     success: function(response){ 
      var temp = []; 
      var humidity = []; 
      var rain = []; 

      $.each(response.list, function(i, item){ 
       if(moment(item.dt, 'X').isSame(moment(), 'day')){ 
        var temperature = ((parseFloat(item.main.temp)-273.15)*1.80).toFixed(0); 
        temp.push([moment(item.dt, 'X').valueOf(), temperature]); 
        humidity.push([moment(item.dt, 'X').valueOf(), parseFloat(item.main.humidity)]); 
        if(item.rain != undefined){ 
         rain.push([moment(item.dt, 'X').valueOf(), parseFloat(item.rain["3h"])]); 
        } 
       } 
      }); 

      var mainWeatherGraphData = [{ 
       label: "Temperature", 
       data: temp, 
       lines: { 
        show: true 
       }, 
       points: { 
        show: true 
       } 
      }, 
       { 
        label: "Humidity", 
        data: humidity, 
        lines: { 
         show: true 
        }, 
        points: { 
         show: true 
        }, 
        yaxis: 2 
       }, 
        { 
         label: "Rain", 
         data: rain, 
         bars: { 
          show: true, 
          barWidth: 1000*60*30, 
          align: 'center' 
         }, 
         yaxis: 3 
        }]; 

      var mainWeatherGraphOptions = { 
       xaxis : { 
        mode : "time", 
       }, 
       yaxes : [ 
        { 
         position: 'left' 
        }, 
        { 
         position: 'right' 
        }, 
        { 
         position: 'right' 
        } 
       ], 
       tooltip : true, 
       tooltipOpts : { 
        content : "<b>%s</b> on <b>%x</b> will be <b>%y</b>", 
        dateFormat : "%y-%m-%d", 
        defaultTheme : false 
       }, 
       legend : { 
        show : true, 
        noColumns : 1, // number of colums in legend table 
        labelFormatter : null, // fn: string -> string 
        labelBoxBorderColor : "#000", // border color for the little label boxes 
        container : null, // container (as jQuery object) to put legend in, null means default on top of graph 
        position : "ne", // position of default legend container within plot 
        margin : [0, 5], // distance from grid edge to default legend container within plot 
        backgroundColor : "#efefef", // null means auto-detect 
        backgroundOpacity : 0.4 // set to 0 to avoid background 
       }, 
       grid : { 
        hoverable : true, 
        clickable : true 
       } 
      }; 
      var mainWeatherGraph = $.plot($("#mainWeatherGraph"), mainWeatherGraphData, mainWeatherGraphOptions); 
     } 
    }); 

    // Daily forecast 

    fetchForecastUrl = 'http://api.openweathermap.org/data/2.5/forecast/daily?lat=' + farmLat + '&lon=' + farmLng; 

    $.ajax({ 
     method: 'get', 
     dataType: "jsonp", 
     url: fetchForecastUrl, 
     success: function(response){ 
      var temp = []; 
      var humidity = []; 
      var rain = []; 

      $.each(response.list, function(i, item){ 
       var temperature = ((parseFloat(item.temp.day)-273.15)*1.80).toFixed(0); 
       temp.push([moment(item.dt, 'X').valueOf(), temperature]); 
       humidity.push([moment(item.dt, 'X').valueOf(), parseFloat(item.humidity)]); 
       if(item.rain != undefined){ 
        rain.push([moment(item.dt, 'X').valueOf(), parseFloat(item.rain)]); 
       } 
      }); 

      var dailyForecastGraphData = [{ 
       label: "Temperature", 
       data: temp, 
       lines: { 
        show: true 
       }, 
       points: { 
        show: true 
       }, 
      }, 
       { 
        label: "Humidity", 
        data: humidity, 
        lines: { 
         show: true 
        }, 
        points: { 
         show: true 
        }, 
        yaxis: 2 
       }, 
        { 
         label: "Rain", 
         data: rain, 
         bars: { 
          show: true, 
          barWidth: 1000*60*60*8, 
          align: 'center' 
         }, 
         yaxis: 3 
        }]; 

      var dailyForecastGraphOptions = { 
       xaxis : { 
        mode : "time", 
       }, 
       yaxes : [ 
        { 
         position: 'left' 
        }, 
        { 
         position: 'right' 
        }, 
        { 
         position: 'right' 
        } 
       ], 
       tooltip : true, 
       tooltipOpts : { 
        content : "<b>%s</b> on <b>%x</b> will be <b>%y</b>", 
        dateFormat : "%y-%m-%d", 
        defaultTheme : false 
       }, 
       legend : { 
        show : true, 
        noColumns : 1, // number of colums in legend table 
        labelFormatter : null, // fn: string -> string 
        labelBoxBorderColor : "#000", // border color for the little label boxes 
        container : null, // container (as jQuery object) to put legend in, null means default on top of graph 
        position : "ne", // position of default legend container within plot 
        margin : [0, 5], // distance from grid edge to default legend container within plot 
        backgroundColor : "#efefef", // null means auto-detect 
        backgroundOpacity : 0.4 // set to 0 to avoid background 
       }, 
       grid : { 
        hoverable : true, 
        clickable : true 
       } 
      }; 
      var dailyForecastGraph = $.plot($("#dailyForecastGraph"), dailyForecastGraphData, dailyForecastGraphOptions); 
     } 
    }); 
} 

Эти два графика почти идентичны, за исключением данных, которые они изображают.

Основной (первый) граф имеет все оси у правильно построены. И мы можем видеть ось для всех 3 правильно. Дневной (второй) график имеет ось дождя y, хотя варианты для них похожи.

Кроме того, все всплывающие подсказки работают нормально, но температурные подсказки, где я могу видеть местозаполнитель% y, а не реальную стоимость.

Я отлаживал этот код последние 2 часа, и я не эксперт по флоту, и я не могу понять, что не так.

Может ли кто-нибудь просмотреть код и рассказать мне, что происходит не так? Заранее спасибо.

Answer 1

Пока вы создаете свои массивы данных о температуре, вам необходимо проанализировать значение температуры в виде поплавка. Обязательно проанализируйте значение как float для обоих графиков. Вы делаете это для своей переменной влажности, и именно поэтому всплывающая подсказка работает для этой серии.

var temperature = ((parseFloat(item.main.temp) - 273.15) * 1.80).toFixed(0); 
temp.push([moment(item.dt, 'X').valueOf(), parseFloat(temperature)]); 

JSFiddle обновляется все те же версии, используемые в теме, которые вы используете: JSFiddle