将 dotnet highcharts 添加到 Xamarin 应用程序

Question

我想将 highcharts 库添加到我的 xamarin 应用程序。 xamarin 是否支持它。我不想使用 oxyplot 因为我已经在我的网络应用程序中使用过 highcharts

任何帮助将不胜感激

Answer 1

如果您的应用不是混合应用，那么答案是否定的。这样做的原因是 HighCharts 是基于 JavaScript 的网络图表。如果您想要完全原生的图表并且不想使用 oxyplot，请查看 ShinobiControls。

Answer 2

其实很简单。将下面的示例放在一起（Xamarin Forms），它没有使用 Highcharts .NET 包装器，它只是粘在原始 javascript 中，但我敢肯定，您可以在通过包装器生成它后注入它。但是请注意，您必须为 iOS 添加一行到 AssemblyInfo，请参见此处：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=windows

该文章还将解释如何将文件（例如 highcharts.js）嵌入到特定于平台的项目中以便在 WebView 中使用，如果您不想使用 CDN，则必须这样做像我在下面做的文件。

XAML:

  <Grid>
    <WebView
        x:Name="ChartView"
        Navigated="WebviewNavigated"
        Navigating="WebviewNavigating"
        Source="{Binding ChartSource}" />
  </Grid>

CS:

    public class MainPageViewModel : ViewModelBase
    {
        public MainPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
        Title = "Main Page";
        var htmlSource = new HtmlWebViewSource();
        htmlSource.Html = ChartHtml;
        ChartSource = htmlSource;
    }

    private WebViewSource _chartSource;
    public WebViewSource ChartSource
    {
        get => _chartSource;
        set => SetProperty(ref _chartSource, value);
    }

    private const string ChartHtml = @"<html>
        <body>

        <script src='https://code.highcharts.com/highcharts.js'></script>
        <script src='https://code.highcharts.com/modules/series-label.js'></script>
        <script src='https://code.highcharts.com/modules/exporting.js'></script>
        <script src='https://code.highcharts.com/modules/export-data.js'></script>

        <div id='container'></div>
        <script type='text/javascript'>
        Highcharts.chart('container', {

            title: {
                text: 'Solar Employment Growth by Sector, 2010-2016'
            },

            subtitle: {
                text: 'Source: thesolarfoundation.com'
            },

            yAxis: {
                title: {
                    text: 'Number of Employees'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },

            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },

            series: [{
                name: 'Installation',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
            }, {
                name: 'Manufacturing',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            }, {
                name: 'Sales & Distribution',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
            }, {
                name: 'Project Development',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
            }, {
                name: 'Other',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
            }],

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }

        });
        </script>
        </body>
        </html>";
}

将 dotnet highcharts 添加到 Xamarin 应用程序

Adding dotnet highcharts to Xamarin app

android

highcharts

xamarin.android

xamarin

oxyplot