Question

有没有办法列出让我们说同一页面上的2个图表，其中每个图表都有其数据xml文件？我正在做的是从rrdtool生成xml文件，我想在一个页面上查看同一设备的所有图表。

这是我用于一个图表的代码：

的test.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="js/test.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
    type: "GET",
    url: "xml/test.xml",
    dataType: "xml",
    success: function(xml) {
        var series = []

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

        //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) {
                    options.series[index].data.push([t, v])
                };
            });
        });

        options.title.text = "CPU - Last 3 hours"
        $.each(series, function(index) {
            options.series.push(series[index]);
        });
        chart = new Highcharts.Chart(options);
    }
})
</script>
</head>
<body>
<div id="cpu" style="width: 800px; height: 400px; margin: 0 auto; padding: 20px"></div>
</body>
</html>

test.js

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

options = {
    chart: {
        renderTo: 'cpu',
        type: 'area',
    },
    title: {
        text: 'CPU'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            hour: '%H. %M',
        }
    },
    yAxis: {
        title: {
            text: 'Utilization %'
        }
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.x) + ': ' + Highcharts.numberFormat(this.y, 2) + ' %';
        }
    },

plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[1]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: true,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },


    series: []
}

和XML文件 - test.xml：

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

<xport>
  <meta>
    <start>1396030800</start>
    <step>300</step>
    <end>1396030800</end>
    <rows>4</rows>
    <columns>1</columns>
    <legend>
      <entry>cpu</entry>
    </legend>
  </meta>
  <data>
    <row><t>1396030800</t><v>2.8000000000e+01</v></row>
    <row><t>1396031100</t><v>2.9780000000e+01</v></row>
    <row><t>1396031400</t><v>3.1596666667e+01</v></row>
    <row><t>1396041600</t><v>NaN</v></row>
  </data>
</xport>

Answer 1

我遇到了同样的问题，刚解决了！

在ready（）函数之前：

  var chart;
  var chart1;

  $( document ).ready(function() {
   your code....

我创建了两个选项，每个选项呈现给不同的容器

options = {
chart: {
    renderTo: 'container',
    type: 'area',
},
options2 = {
chart: {
    renderTo: 'container2',
    type: 'area',
},

并使用以下代码添加到不同的容器中：

chart = new Highcharts.Chart(options);
chart1 = new Highcharts.Chart(options2);

然后在你的HTML中：

<div id="container">
<div id="container2">

希望这个简短的解释有所帮助。如果有什么不清楚的话，请随时问我。

干杯，

Highcharts - 如何使用多个xml文件在一个页面上显示多个图形

1 个答案: