通过带有外部文件的 XML Chart.js 折线图

如何解决通过带有外部文件的 XML Chart.js 折线图

我在使用 chart.js 生成图表时遇到问题。

基本上，我从 data1.js 文件中获取数据，我只想显示和获取实时数据图表的 xAxis“时间”和 yAxis“值”的数据。

谁能帮助我或给我提示？谢谢

我的 data1.js 文件：

port01["name":"VVB001","time":"2021-02-16 16:53:09","type":"a-Peak","value":0.2]

到目前为止我的 HTML 文件：


<!doctype html>
<html lang="en">

<body>
        
    
        <div style="height:100px; width:400px">
            <canvas id="myChart1" style="border: 1px solid #ccc"></canvas>
        </div>

    
    </body>
    
<body>

<!--suppress JSUnresolvedLibraryURL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--suppress JSUnresolvedLibraryURL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--suppress JSUnresolvedLibraryURL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
        <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.0"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>



<!--1-->

<script>

function loadFile(filePath) {
    var result = null;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET",filePath,false);
    xmlhttp.send();
    if (xmlhttp.status==200) {
            result = xmlhttp.responseText;
    }
    return result;
  };

    $(document).ready(function () {
        const config = {
            type: 'line',data: {
                labels: [],datasets: [{
                    label: 'PORT 01 Schwingwert',backgroundColor: 'rgb(23,99,175)',borderColor: 'rgb(23,data: [{
                        y: valueData,x: timeData 
                    }],cubicInterpolationMode: 'monotone',fill: false,}],},options: {
                responsive: true,title: {
                    display: true,text: 'X Axis Zeitstempel (ms) / Y Axis Schwingungswert (m/sec)'
                },tooltips: {
                    mode: 'index',intersect: false,hover: {
                    mode: 'nearest',intersect: true
                },scales: {
                    xAxes: [{
                        display: true,scaleLabel: {
                            display: true,labelString: 'Zeitstempel (ms)'
                        }
                    }],yAxes: [{
                        display: true,labelString: 'Amplitude (m/sec)'
                        }
                    }]
                }
            }
        };

        var ctx_1 = document.getElementById('myChart1').getContext('2d');

        var lineChart = new Chart(ctx_1,config);

        var inputData = loadFile("data1.js");

        var sensorData = JSON.parse(inputData);

        var timeData  = sensorData[0].time;
        var valueData = sensorData[0].value;

    

        
    });
</script>

</html>

不幸的是，我无法从这一步走得更远！