Adding dotnet highcharts to Xamarin app

问题

I want to add highcharts library to my xamarin app. Does xamarin support it or not. I don't want to use oxyplot as i have already worked with highcharts in my web application

Any help would be highly appreciated

回答1:

If your app isn't a hybrid-app than the answer is no. The reason for this is that HighCharts are JavaScript-based charts for the web. If you want fully native charts and don't want to use oxyplot take a look at ShinobiControls.

回答2:

It's actually pretty simple. Put together an example below (Xamarin Forms), and it's not using the Highcharts .NET wrapper it's just sticking in raw javascript but you could inject it after generating it via the wrapper I'm sure. Note however you'll have to add a line for iOS to AssemblyInfo, see here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=windows

That article will also explain how to embed files (e.g. highcharts.js) in your platform-specific projects for use in WebView, which you'll have to do if you don't want to use the CDN files like I do below.

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

来源：https://stackoverflow.com/questions/40416108/adding-dotnet-highcharts-to-xamarin-app

标签

android

Xamarin

Highcharts

xamarin.android

OxyPlot