Question

我对语法感到困惑，需要一些帮助，我有简单的数据集，需要将其绘制为带有2条实线的时间轴（带Rangeslider的时间序列）。

我的数据集格式为：

[{"pm10": 12.1, "pm25": 7.0, "time": "13.08.2018 12:25:09"}, {"pm25": 6.6, "pm10": 11.1, "time": "13.08.2018 12:30:49"}, {"pm10": 12.6, "pm25": 6.2, "time": "13.08.2018 16:59:06"},   {"pm10": 9.2, "pm25": 5.8, "time": "13.08.2018 19:37:01"}, {"pm25": 5.1, "pm10": 8.7, "time": "13.08.2018 19:42:46"},   {"pm10": 7.3, "pm25": 5.5, "time": "13.08.2018 21:42:23"}, {"pm25": 5.1, "pm10": 7.1, "time": "13.08.2018 21:47:56"}, {"pm10": 8.3, "pm25": 5.5, "time": "13.08.2018 21:53:28"}]

我已尽一切努力以这种格式制作JSON，所以我不知道该怎么做：

从外部.JSON文件中获取实时数据（加载时）
以可显示两行（pm25和pm10）的方式格式化数组

我已经花了3天的时间，对您的帮助表示感谢。

我尝试了其他答案的样本，到目前为止： https://jsfiddle.net/v15wmeuL/2/

Answer 1

要从外部JSON抓取数据，请查看xmlHttpRequests或等效项。

我对您的代码做了一些修改，将您想要的数据显示为两条曲线：

let trace1 = {
  x: [],
  y: [],
  mode: "lines"
};
let trace2 = {
  x: [],
  y: [],
  mode: "lines"
};
data.forEach(function(val) {
  trace1.x.push(val["time"]);
  trace1.y.push(val["pm25"]);
  trace2.x.push(val["time"]);
  trace2.y.push(val["pm10"]);
});
Plotly.newPlot('AQI', [trace1, trace2]);

Answer 2

太棒了，绘图部分起作用了！

但是我仍然无法使数据检索部分失败。

这是我到目前为止所拥有的：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
     }
};

 data = xmlhttp.open("GET", 
 "http://192.168.0.170/aqi.json", true);

let trace1 = {
  x: [],
  y: [],
  mode: "lines"
  };
let trace2 = {
  x: [],
  y: [],
  mode: "lines"
  };
data.forEach(function(val) {
 trace1.x.push(val["time"]);
 trace1.y.push(val["pm25"]);
 trace2.x.push(val["time"]);
 trace2.y.push(val["pm10"]);
});
Plotly.newPlot('AQI', [trace1, trace2]);

https://jsfiddle.net/v15wmeuL/14/（用于绘图部分）。 -还需要特定的日期格式-因此必须修改传入的数据。

Answer 3

如果您使用的是JQuery，则以下语法会有所帮助：

<cxf:cxfEndpoint id="CXFTest" address="/javainuse/learn"
                 endpointName="a:SOATestEndpoint" serviceName="a:SOATestEndpointService"
                 serviceClass="com.javainuse.SOATestEndpoint"
                 xmlns:a ="http://javainuse.com">
    <cxf:binding>
        <soap:soapBinding mtomEnabled="false" version="1.2" />
    </cxf:binding>

    <cxf:features>
        <wsa:addressing  xmlns:wsa="http://cxf.apache.org/ws/addressing"/>
    </cxf:features>
    <cxf:inInterceptors>
        <bean class="org.apache.cxf.binding.soap.saaj.SAAJInInterceptor" />
        <bean class="org.apache.cxf.ws.security.wss4j.DefaultCryptoCoverageChecker" />
        <ref bean="TAXWSS4JInInterceptorBean" />            
    </cxf:inInterceptors>
    <cxf:inFaultInterceptors>
        <bean class="org.apache.cxf.binding.soap.saaj.SAAJInInterceptor" />
        <bean class="org.apache.cxf.ws.security.wss4j.DefaultCryptoCoverageChecker" />            
        <ref bean="TAXWSS4JInInterceptorBean" />            
    </cxf:inFaultInterceptors>
    <cxf:outInterceptors>
        <bean class="org.apache.cxf.binding.soap.saaj.SAAJOutInterceptor" />
        <ref bean="TAXWSS4JOutInterceptorBean" />
    </cxf:outInterceptors>
    <cxf:outFaultInterceptors>
        <bean class="org.apache.cxf.binding.soap.saaj.SAAJOutInterceptor" />
        <ref bean="TAXWSS4JOutInterceptorBean" />
    </cxf:outFaultInterceptors>
</cxf:cxfEndpoint>


<camelContext xmlns="http://camel.apache.org/schema/spring">
    <camel:route>
        <camel:from uri="cxf:bean:CXFTest" />
        <to uri="bean:processor"/>
    </camel:route>
</camelContext>

JSON数据以绘图方式显示

3 个答案: