использование диаграмм слияния в формах xamarin

Я пытаюсь реализовать диаграммы с использованием диаграмм слияния в моем проекте форм Xamarin (первое тестирование в проекте Android).

Я скачал пробную версию и добавил файлы fusioncharts.js и fusioncharts.charts.js в папку активов.

private string GetChartScript()
    {
        var chartConfig = GetSpendingChartConfig();
        var script = $@"var config = {chartConfig};
        window.onload = function() {{
        var canvasContext = 
        document.getElementById(""chart"").getContext(""2d"");
        new Chart(canvasContext, config);
        }};";
        return script;
    }

private string GetHtmlWithChartConfig(string chartConfig)
    {
        var inlineStyle = "style=\"width:100%;height:100%;\"";
        var chartConfigJsScript = $"<script>{chartConfig}</script>";
        var chartContent = $@"<div id=""chart-container"" {inlineStyle}>
  <canvas id=""chart"" />
</div>";
        var document = $@"<html style=""width:97%;height:100%;"">
<head></head>
<body {inlineStyle}>
{chartContent}
{chartConfigJsScript}
</body>
</html>";
        return document;
    }

 var html = GetHtmlWithChartConfig(chartConfigScript);

И на моей странице:

source = new HtmlWebViewSource();
        string url = DependencyService.Get<IBaseUrl>().GetBaseUrl();
        source.BaseUrl = url;
        source.Html = html;
        ChartWebView.Source = source;

XAML:

<local:ChartWebView x:Name="ChartWebView" />

Но символ пустой, без данных, полос и осей.

Спасибо


xamarin.forms xamarin.android fusioncharts
person Sai Sunkari    schedule 05.11.2019    source источник
comment
Fusion Charts, похоже, не поддерживает C#, вы можете попытаться создать файл WebView и использовать файл .js так же, как на веб-сайте, или попробовать другую библиотеку диаграмм, например Микродиаграммы или OxyPlot, полная поддержка XF, также вы можете попробовать Syncfusion Syncfusion Xamarin Charts но это платная библиотека. Все библиотеки, которые я упомянул, полностью поддерживают Xamarin.Forms.   -  person FabriBertani    schedule 05.11.2019
comment
@FabriBertani, пожалуйста, проверьте мой обновленный код. Мы используем диаграммы слияния в настольном приложении. Поэтому мы хотим соответствовать мобильным приложениям.   -  person Sai Sunkari    schedule 05.11.2019
comment
мне кажется нормально, работает? попробуйте поискать в Google fusion charts c# дополнительную информацию   -  person FabriBertani    schedule 05.11.2019
comment
Нет, это не так. веб-просмотр пуст.   -  person Sai Sunkari    schedule 05.11.2019

Ответы (1)


arrow_upward
4
arrow_downward

FusionCharts поддерживает FusionCharts.NET, библиотеку диаграмм для ASP.NET MVC, ASP.NET WebForms, .NET Core и .NET Standard, которая использует библиотеку FusionCharts JavaScript (HTML5) для отображения интерактивных диаграмм.

Вы можете установить FusionCharts.NET как пакет NuGet. Чтобы использовать пакет NuGet, выполните следующую команду в консоли диспетчера пакетов NuGet:

Install-Package FusionCharts.Visualization -Version 1.0.7

Вам нужно добавить WebView в xaml и указать имя следующим образом.

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="FusionChartsDemoProject.MainPage">
    <StackLayout>
<WebView x:Name="web" HeightRequest="600" WidthRequest="100" />
        <Button Clicked="ChartClicked" Text="Render Chart"/>
    </StackLayout>
</ContentPage>

На исходной странице включите следующие пространства имен

 using FusionCharts.DataEngine;
 using FusionCharts.Visualization;

Объявлен обработчик события нажатия кнопки и написан в нем следующий код.

    private void ChartClicked(object sender, EventArgs e)
        {
            DataTable ChartData = new DataTable();
            ChartData.Columns.Add("Programming Language", typeof(System.String));
            ChartData.Columns.Add("Users", typeof(System.Double));
            ChartData.Rows.Add("Java", 62000);
            ChartData.Rows.Add("Python", 46000);
            ChartData.Rows.Add("Javascript", 38000);
            ChartData.Rows.Add("C++", 31000);
            ChartData.Rows.Add("C#", 27000);
            ChartData.Rows.Add("PHP", 14000);
            ChartData.Rows.Add("Perl", 14000);

            // Create static source with this data table
            StaticSource source = new StaticSource(ChartData);
            // Create instance of DataModel class
            DataModel model = new DataModel();
            // Add DataSource to the DataModel
            model.DataSources.Add(source);
            // Instantiate Column Chart
            Charts.ColumnChart column = new Charts.ColumnChart("first_chart");
            // Set Chart's width and height
            column.Width.Pixel(300);
            column.Height.Pixel(400);
            // Set DataModel instance as the data source of the chart
            column.Data.Source = model;
            // Set Chart Title
            column.Caption.Text = "Most popular programming language";
            // Sset chart sub title
            column.SubCaption.Text = "2017-2018";

            // set XAxis Text
            column.XAxis.Text = "Programming Language";
            // Set YAxis title
            column.YAxis.Text = "User";
            column.ThemeName = FusionChartsTheme.ThemeName.FUSION;
            WebView browser =(WebView) Content.FindByName("web");

          var htmlSource = new HtmlWebViewSource();
           htmlSource.Html = @"<html><head><script src='https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js'><script src='https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js'></script></head><body>
 <h1>FusionCharts demo</h1><br/>" + column.Render()+

 "</body></html>";
          browser.Source = htmlSource;

        }

Наконец, вы получите следующую визуализацию в эмуляторе: Идет рендеринг диаграммы

person Soumya sankar Dutta    schedule 13.11.2019
comment
как добавить js-файлы диаграмм слияния (вместо ссылки) и добавить их в качестве источника в html-файл в xamarinforms ios? - person Sai Sunkari; 19.11.2019