高温湿度图表不共享工具提示

Question

我正在做一个周末的项目，用DHT22传感器和我的raspberryPi来监测温度和湿度。阅读的效果很好，现在我试着用高图表来描绘所有的东西。

以下是我使用的高级图表选项：

Highcharts.setOptions({global:{useUTC:false}});options={
    chart:{
        renderTo:"content",
        type:"spline",
        zoomType: 'xy'
    },
    title:{
        text:"title"
    },
    subtitle:{
        text:""
    },
    xAxis:{
        type:"datetime",
        dateTimeLabelFormats:{
            hour:"%H. %M"
        }
    },
    yAxis: [{ // temperature axis
        title: {
            text:"T (°C)"
        },
        labels: {
            format: '{value}',
            style: {
                fontSize: '10px'
            }
        }
    }, { // humidity axis
        title: {
            text: "Humidity (%)",
        },
        labels: {
            format: '{value}',
            style: {
                fontSize:'10px'
            }
        },
        opposite: true,
        gridLineWidth: 0
    }],
    tooltip:{
        shared: true
    },
    series: [{
        name: 'Temperature',
        data:[],
        tooltip: {
            valueSuffix: ' °C'
        }
    },
    {
        name: 'Humidity',
        data:[],
        yAxis:1,
        tooltip: {
            valueSuffix: ' %'
                    }
    }]
}

这是将数据插入到图形中的实际代码：

<script type="text/javascript">
    $(document).ready(function(){
        var urls = [GetTempXml(),GetHumidityXml()];
        var xmlTemp;
        var xmlHum;
        $.get(GetTempXml(), function(xmlTemp) {
            $.get(GetHumidityXml(), function(xmlHumid) {
                var $xmlTemp = $(xmlTemp), $xmlHumid = $(xmlHumid);

                //populate with data
                function populate(xml, index) {
                    $(xml).find("row").each(function() {
                        var t = parseInt($(this).find("t").text())*1000
                        $(this).find("v").each(function(index){
                            var v = parseFloat($(this).text())
                            v = v || null
                            if (v != null) {
                                options.series[index].data.push([t,v])
                                };
                            });
                        });
                    };

                populate(xmlTemp, 0);
                populate(xmlHumid,1);

                options.title.text = "Temperature and Humidity";

                //add sunrise and sunset
                options.xAxis.plotBands = []
                for (var i = GetBandsNumber(); i >= 0; i--) {
                    var d = new Date();
                    d.setHours(0,0,0,0);
                    d.setDate(d.getDate()-i);
                    var sunrise = d.getTime()+computeSunrise(dayOfYear(), true);
                    var sunset = d.getTime()+computeSunrise(dayOfYear(), false);
                    options.xAxis.plotBands.push({
                        from: sunrise,
                        to: sunset,
                        color: '#FCFFC5'
                        });
                };
                chart = new Highcharts.Chart(options);
            });
        });
    });
</script>

但正如你所看到的，有几个问题：

​

• 湿度轴不使用另一种颜色。我甚至尝试使用轴的定义，但没有起作用： 样式：{ color: Highcharts.getOptions().colors }
• 工具提示应该是共享的，但只显示湿度数据。
• 从第一个湿度值到最后一个温度值有一个奇怪的曲线。我怎么才能把它移除？

Answer 1

谢谢你们。我在这个问题上发现了我自己的错误。

如果您检查填充函数，您将看到我使用索引变量来驱动序列数组，但是该变量被find.each调用中使用的函数覆盖。我刚把变量的名字改成了serie和voil！

//populate with data
function populate(xml, serie) {
    $(xml).find("row").each(function() {
        var t = parseInt($(this).find("t").text())*1000
        $(this).find("v").each(function(index){
            var v = parseFloat($(this).text())
            v = v || null
            if (v != null) {
                options.series[serie].data.push([t,v])
                };
            });
        });
    };