javascript - 温湿度 Highcharts 不共享工具提示

我正在进行一个周末项目，该项目使用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>

但是如您所见，存在一些问题：



湿度轴未使用其他颜色。
我什至尝试在轴定义上使用，但不起作用：

风格：{
    颜色：Highcharts.getOptions（）。colors [0]
}
该工具提示应该被共享，但仅显示湿度数据
从第一个湿度值到最后一个温度值有一条怪异的曲线。我该如何删除？

最佳答案

感谢大伙们。我发现了自己的错误。

如果检查populate函数，您将看到我正在使用index变量来驱动系列数组，但是该变量被find.each调用中使用的函数所覆盖。我只是将变量的名称更改为serie，所以！

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

关于javascript - 温湿度 Highcharts 不共享工具提示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28268116/