Блог

Главная - Вопросы по программированию - Как передать переменную из c # в javascript для построения графика в plotly.js

Как передать переменную из c # в javascript для построения графика в plotly.js

#javascript #c# #html #plotly

#javascript #c# #HTML #plotly

Вопрос:

Я пытаюсь передать данные X и Y, сгенерированные на c #, в plotly.js которые обновляются каждую секунду (или так часто, как это возможно программно). Как бы я ссылался в javascript на переменную, подобную x и y, расположенную в .файл json или c #? В конечном счете, фрагмент javascript должен выполняться с x и y, взятыми из кода c # (или в c # я могу генерировать файл .json каждую секунду). Plotly допускает динамическое обновление, поэтому это должно быть возможно, если переменные могут быть переданы. Я включил свою отправную точку ниже:

C # Код:

 dataPoint.X = 0;
dataPoint.Y = retrieveVariable(MachineInfoService.Instance.machineInfo.plot, 0);
xstr = dataPoint.X.ToString();
ystr = dataPoint.Y.ToString();
for (i = 1; i < numdataPoints; i  )
{
     dataPoint.X = i;
     dataPoint.Y = retrieveVariable(MachineInfoService.Instance.machineInfo.plot, i);
     xstr =xstr  ", "  dataPoint.X.ToString();
     ystr = ystr  ", "  dataPoint.Y.ToString();
     Globals.PlotlyX = xstr;
     Globals.PlotlyY = ystr;
     graphData.Add(dataPoint);
}
            
webView.Navigate(new Uri("ms-appx-web:///Assets/index3.html"));

index3.html:

 <html>
<head>
    <!-- Plotly.js -->
    <!----<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  -->

    <script src="plotly-latest.min.js"></script>
    <script type="text/javascript" src="../Assets/xydata.json"></script>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <!-- Plotly chart will be drawn inside this DIV -->
    <div id="graphDiv"></div>
    <script>

        
        jQuery.get('../Assets/xydata.json');
        Plotly.newPlot('plotly-chart', data, layout);
        
        
        

    </script>
</body>
</html>

xydata.json:

 {
  "data": [
    {
      "x": [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
      "y": [ 0, 3, 6, 4, 5, 2, 3, 5, 4 ],
      "type": "scatter",
      "name": "Plot 1"
    },
    {
      "x": [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
      "y": [ 0, 4, 7, 8, 3, 6, 3, 3, 4 ],
      "type": "scatter",
      "name": "Plot 2"
    },
    {
      "x": [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
      "y": [ 0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2 ],
      "type": "scatter",
      "name": "Plot 3"
    }
  ],
  "layout": {
    "showlegend": true,
    "legend": { "orientation": "h" }
  }
}

Ответ №1:

Я бы не стал записывать в файл для каждого обновления графика. Вероятно, самым чистым способом было бы использовать Json от Newtonsoft.NET, который помогает вам конвертировать.СЕТЕВЫЕ объекты в JSON. Если вы не хотите использовать другую библиотеку, вы также можете просто вручную отформатировать строку в допустимый JSON, но это может быть намного сложнее / подвержено ошибкам.

После получения новых данных графика вызовите функцию через C #, например:

 PlotyObject data = new PlotyObject()
webView.Document.InvokeScript("updatePlotWithNewData", {JsonConvert.SerializeObject(data)})

или

 webView.Document.InvokeScript("updatePlotWithNewData", {"{...manually formatted JSON...}"})

В вашем index3.html файле вы могли бы сделать что-то вроде этого, чтобы принять новые данные и обновить график построения:

 <script>

    var plotlyData = {...}
    var layout = { ... }

    $(document).ready(function() {
        Plotly.newPlot('plotly-chart', plotlyData, layout);
    });

    function updatePlotWithNewData(newData) {
        plotlyData = JSON.parse(newData);
        Plotly.redraw('plotly-chart');
    }

</script>