如何将c#中的变量传递到javascript中，以便在plotly.js中打印_Javascript_C#_Html_Plotly

如何将c#中的变量传递到javascript中，以便在plotly.js中打印

javascript c# html

如何将c#中的变量传递到javascript中，以便在plotly.js中打印,javascript,c#,html,plotly,Javascript,C#,Html,Plotly,我试图将c#中生成的X和Y数据传递到plotly.js中，plotly.js每秒更新一次（或者尽可能以编程方式更新）。如何在javascript中引用位于.json文件或c#中的x和y这样的变量？最终，javascript片段应该以从c代码中提取的x和y（或者在c代码中，我可以每秒生成一个.json文件）以绘图方式运行。Plotly允许动态更新，因此如果可以传递变量，这应该是可能的。我的出发点如下： C#代码： dataPoint.X = 0; dataPoint.Y = retrieveVar

我试图将c#中生成的X和Y数据传递到plotly.js中，plotly.js每秒更新一次（或者尽可能以编程方式更新）。如何在javascript中引用位于.json文件或c#中的x和y这样的变量？最终，javascript片段应该以从c代码中提取的x和y（或者在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"));

<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>

{
  "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" }
  }
}

我不会为每次绘图更新写入文件。最干净的方法可能是使用它来帮助您将.NET对象转换为JSON。如果您不想使用另一个库，也可以手动将字符串格式化为有效的JSON，但这可能要复杂得多/容易出错

拥有新的绘图数据后，通过C#调用函数，如下所示：

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

或

在

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>


变量plotlyData={…}
变量布局={…}
$（文档）.ready（函数（）{
Plotly.newPlot（'Plotly-chart'，Plotly数据，布局）；
});
函数updatePlotWithNewData（newData）{
plotlyData=JSON.parse（newData）；
Plotly.redraw（“Plotly-chart”）；
}

<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>