Question

我正在进行一个周末项目，使用DHT22传感器和我的raspberryPi监测温度和湿度。阅读效果很好，现在我试图使用Highcharts绘制所有内容。

这是我使用的Highcharts选项：

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>

但是你可以看到有一些问题： highchart_temp_humidity

湿度轴不使用其他颜色。我甚至尝试使用轴定义，但没有工作：

style：{ color：Highcharts.getOptions（）。colors [0] }
工具提示应该是共享的，但只显示湿度数据
从第一个湿度值到最后一个温度值有一个奇怪的曲线。我该如何删除？

Answer 1

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

如果检查populate函数，您将看到我使用索引变量来驱动系列数组，但该变量被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])
                };
            });
        });
    };

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

1 个答案: