javascript - Flot Graph 与轴和工具提示不一致？

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);
        }
    });
}

这两张图除了描绘的数据外几乎完全相同。

主(第一个)图表正确绘制了所有 y 轴。我们可以正确地看到所有 3 个轴。每日(第二个)图表确实有雨 y 轴，尽管它们的选项相似。

除此之外，所有工具提示都工作正常，但我可以看到占位符 %y 而不是实际值的温度工具提示。

过去 2 小时我一直在调试这段代码，我不是 Flot 专家，我无法弄清楚哪里出了问题。

任何人都可以查看代码并告诉我哪里出了问题吗？提前谢谢你。

Answer 1

在创建温度数据数组时，您需要将温度值解析为 float 。确保将两个图形的值都解析为 float 。您正在为湿度变量执行此操作，这就是工具提示适用于该系列的原因。

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

JSFiddle 更新了您正在使用的主题中使用的所有相同版本:JSFiddle