我想将highcharts
库添加到我的xamarin
应用中。 xamarin是否支持它。我不想使用oxyplot
,因为我已经在我的Web应用程序中使用highcharts了
任何帮助将不胜感激
如果您的应用不是混合应用,则答案为否。这样做的原因是HighCharts是Web上基于JavaScript的图表。如果您想要完全本机的图表,并且不想使用oxyplot,请看一下ShinobiControls。
实际上非常简单。在下面放一个示例(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>";
}