温度和湿度的 Highchart 不共享工具提示答案

【问题标题】：Highchart for temperature and humidity does not share tooltip温度和湿度的 Highchart 不共享工具提示
【发布时间】：2015-02-01 21:26:59
【问题描述】：

我正在做一个周末项目，使用 DHT22 传感器和我的树莓派来监测温度和湿度。读数效果很好，现在我正在尝试使用 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] }
工具提示应该是共享的，但只显示湿度数据
从第一个湿度值到最后一个温度值有一条奇怪的曲线。我怎样才能删除它？

【问题讨论】：

你能添加任何带有一些虚拟数据的 JSFiddle 吗？
首先你提到的是湿度serie 不是axis。其次，您的湿度系列似乎没有数据。这就是为什么它不显示任何红线或不显示在工具提示中的原因。该曲线可能是因为您的数据未排序。您的页面控制台中是否有任何错误？正如@RocoCTZ 提到的，如果您可以在jsfiddle.net 中实现您的代码，我们会更容易为您提供帮助
问题是你有一个系列，所以你应该创建两个分开的系列。
我相信你是对的@SebastianBochan，但选项上的系列定义不正确吗？如果没有，你能指出我正确的方向吗？同时我试图把它放到 Jsfiddle.net

标签： javascript highcharts

【解决方案1】：

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

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

【讨论】：