是否可以在C# Winforms WebBrowser组件中使用Plotly.js?

fcwjkofz  于 2022-11-25  发布在  C#
关注(0)|答案(3)|浏览(249)

我试图从WebBrowser工具箱组件中使用C# Winforms桌面应用程序中的Plotly.js,但遇到了一些困难。通过将文本字符串分配给WebBrowser.DocumentText属性,可以将代码加载到组件中。
具体来说,当程序运行时,我得到以下错误:“Plotly is undefined.”同样的代码,当粘贴到一个名为index.html的文件中时,双击后会在FireFox浏览器窗口中正确加载和运行。必须是非常简单和新手或只是无知的东西。
下面是index.html文件的内容:

<html>
<head>
<script src = 'plotly-latest.min.js'></script>
</head>
<body>
<div id = "myDiv"></div>
<script>
var myDiv = document.getElementById('myDiv');
var trace = {
x : [9,8,5,1],
y : [1,2,4,8],
z : [11,8,15,3],
mode : 'lines' };
var data = [trace];
Plotly.newPlot(myDiv, data);
</script>
</body>
<html>

感谢您可能提供的任何帮助(双关语!)

6ie5vjzr

6ie5vjzr1#

默认情况下,WebBrowser控件使用与Plotly.js不兼容的IE6。您可以使其使用IE11以using windows registry显示图形。如果需要分发应用程序,也可以使用do it in code
您还可以选择放弃WebBrowser控件,使用第三方浏览器控件,如CefSharp(免费)或DotNetBrowser(商业)。

1dkrff03

1dkrff032#

也许太老了,回答不了,但我只是试着这样做,它似乎现在工作:
使用Plotly.NET包制作一个图表,然后使用chart.SaveHTMLAs<>并给予它命名。然后,使用webBrowser对象导航到该html。
下面是我的代码:

Plotly.NET.GenericChart.GenericChart point3Dchart =  Plotly.NET.Chart3D.Chart.Point3D<int, int, int, int>(tuppList, "p");
        point3Dchart.SaveHtmlAs<int>("a", null);
        //point3Dchart.Show(); // Will open firefox
        webBrowser1.Navigate(@"C:\...\bin\Debug\a.html");

我现在不确定为什么SaveHTMLAs要求<>,但是写int似乎有效!

enxuqcxy

enxuqcxy3#

WebBrowser.NET组件使用的是Internet Explorer,如前所述,它可能无法呈现Plotly.js使用的现代JavaScript
对于.NET,您可以使用下列其中一项:
1.使用Edge呈现网页的WebView2控件
WebView article
WebView2 component on NuGet
NuGet\Install-Package Microsoft.Web.WebView2

  1. CefSharp-Chromium嵌入式框架(CEF)周围的.NET Package 器,使用Chromium引擎渲染页面(与Chrome浏览器使用的引擎非常相似)
    CefSharp github repository
    CefSharp.WinForms package
    NuGet\Install-Package CefSharp.WinForms
    您可以使用您的解决方案创建一个包含JavaScript的页面,并将其加载到上述Web浏览器控件或
    您可以使用Plotly.NET直接从C#呈现Plotly。示例:
using Plotly.NET;
        using Plotly.NET.LayoutObjects;
        ...

        LinearAxis xAxis = new LinearAxis();
        xAxis.SetValue("title", "xAxis");
        xAxis.SetValue("showgrid", false);
        xAxis.SetValue("showline", true);

        LinearAxis yAxis = new LinearAxis();
        yAxis.SetValue("title", "yAxis");
        yAxis.SetValue("showgrid", false);
        yAxis.SetValue("showline", true);

        LinearAxis zAxis = new LinearAxis();
        zAxis.SetValue("title", "zAxis");
        zAxis.SetValue("showgrid", false);
        zAxis.SetValue("showline", true);

        Layout layout = new Layout();
        layout.SetValue("xaxis", xAxis);
        layout.SetValue("yaxis", yAxis);
        layout.SetValue("zaxis", zAxis);
        layout.SetValue("showlegend", true);

        List<Tuple<double, double, double>> p = new List<Tuple<double, double, double>>();

        foreach (var m in batch.Measurements)
        {
            var (_x, _y, _z) = m.GetCartesianCoordinates();
            p.Add(Tuple.Create(_x, _y, _z));
        }

        string plotHtmlFilePath = GetNewUniqueTempPath();

        Plotly.NET.Chart3D.Chart.Point3D<double, double, double, double>(p.ToArray())
            .WithLayout(layout)
            .SaveHtml(plotHtmlFilePath);

// using WebView2 control
            plotWebView.Source = new Uri(plotHtmlFilePath);

也可以在默认浏览器中为您打开它:

Plotly.NET.Chart3D.Chart.Point3D<double, double, double, double>(p.ToArray())
        .WithLayout(layout)                
        .Show();

相关问题