используя диаграммы слияния в формах ксамарина - PullRequest
Новая
       14

используя диаграммы слияния в формах ксамарина

0 голосов
/ 05 ноября 2019

Я пытаюсь реализовать диаграммы с использованием диаграмм fusion в моем проекте форм 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" />

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

Спасибо

1 Ответ

3 голосов
/ 13 ноября 2019

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;

        }

Наконец, вы получите следующую визуализацию в эмулятореChart is getting rendered

...