0

我不是开发人员，所以我需要你的帮助。我想创建一个带有多个轴的 Highcharts 图表，如下所示：http ://www.highcharts.com/demo/combo-multi-axes Highcharts 示例使用 3 种类型的值：温度、压力和降雨量，但我需要它在同一张图表中绘制温度和湿度，所以只有两种类型的值。借助 RRDtool（循环数据库），数据（温度和湿度）存储到 XML 中。现在我使用 Highcharts 绘制基本线，所以每个图表只绘制一种类型的值（一个图表用于温度，另一个图表用于湿度）。

这是我的基本折线图代码：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script type="text/javascript" src="/weather-station/js/highcharts.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).ready(function() {

                $.ajax({
                    type: "GET",
                    url: "/data/temperature24h.xml",
                    dataType: "xml",
                    success: function(xml) {

                        Highcharts.setOptions({global:{useUTC:false}});
                        options={chart:{renderTo:"container-fluid",type:"spline",zoomType:"xy"},title:{text:""},xAxis:{type:"datetime",dateTimeLabelFormats:{hour:"%H. %M"}},yAxis:{title:{text:"Temperature (°C)"}},tooltip:{formatter:function(){return"<b>"+this.series.name+"</b><br/>"+Highcharts.dateFormat("%H:%M",this.x)+": "+this.y.toFixed(1)+" °C"}},plotOptions:{series:{marker:{radius:2}}},lineWidth:1,series:[]}

                        var series = []
                        //alert('start');

                        //define series
                        $(xml).find("entry").each(function() {
                            var seriesOptions = {
                                name: $(this).text(),
                                data: []
                            };
                            options.series.push(seriesOptions);
                        });
                        //alert('finish part 1');

                        //populate with data
                        $(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) {
                                    //alert('index = ' + index + 'time=' + t + 'v=' + v);
                                    options.series[index].data.push([t, v])
                                };
                            });
                        });
                        //alert('finish part 2');

                        options.title.text = "Temperatures of the last 24h"
                        $.each(series, function(index) {
                            options.series.push(series[index]);
                        });
                        //alert('finish part 3');

                        chart = new Highcharts.Chart(options);
                    }
                });
            });
        });

    </script>

            <script type="text/javascript" src="/weather-station/js/exporting.js"></script>

这是一些 XML 行（时间和数据）的示例：

<?xml version="1.0" encoding="ISO-8859-1"?>

<xport>
<meta>
<start>1381828200</start>
<step>300</step>
<end>1381828200</end>
<rows>289</rows>
<columns>3</columns>
<legend>
<entry>External Temperature</entry>
<entry>Internal Temperature</entry>
<entry>Bedroom Temperature</entry>
</legend>
</meta>
<data>
<row><t>1381828200</t><v>2.2399482146e+01</v><v>2.3000000000e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381828500</t><v>2.2598366803e+01</v><v>2.3000000000e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381828800</t><v>2.2898350863e+01</v><v>2.3099450288e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381829100</t><v>2.3197774941e+01</v><v>2.3100000000e+01</v><v>2.2600000000e+01</v></row>
<row><t>1381914600</t><v>NaN</v><v>NaN</v><v>NaN</v></row>
</data>
</xport>

请问，有人可以通过从 XML 文件中获取数据来修改我的基本行 Highcharts 代码以创建多轴代码吗？

非常感谢！

4

1 回答 1

0

您需要熟悉解析多个 yAxis 的 XML 和系列结构，如下所示：http ://www.highcharts.com/demo/combo-multi-axes然后在预处理期间准备数据。

于 2013-10-16T11:00:22.687 回答