向Xamarin应用程序添加dotnet highcharts

问题描述 投票:0回答:2

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

任何帮助将不胜感激

android xamarin highcharts xamarin.android oxyplot
2个回答
1
投票

如果您的应用不是混合应用,则答案为否。这样做的原因是HighCharts是Web上基于JavaScript的图表。如果您想要完全本机的图表,并且不想使用oxyplot,请看一下ShinobiControls。


0
投票

实际上非常简单。在下面放一个示例(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>";
}
© www.soinside.com 2019 - 2024. All rights reserved.