【Highcharts教程】Highcharts Android包装教程

下载Highcharts最新版本

在本教程中，我将向您展示如何使用Highcharts Android包装器创建交互式图表以显示UEFA冠军数据。 如果您是Android开发人员，Java很可能是您的首选语言。但是，您可能还有一些来自其他平台的热门工具，例如Highcharts，这是受欢迎的Web企业图表库。 Highcharts Android Wrapper为您提供了将图表初始化为Android中的普通视图的功能。此解决方案允许您将图表创建为单独的片段或活动; 您还可以直接在其他视图旁边创建图表，而不会影响它们。 好吧，让我们亲身体验一下真正体验Highcharts Android Wrapper的项目

入门

在Android Studio中创建一个新项目，命名它，选择Android 5.0和空活动模板。

将Highcharts Android Framework添加到您的项目中。有两种方法可以做到这一点。首先，您可以下载该aar文件并手动添加。将aarlibs文件夹放在项目结构中。然后，将以下行添加到app 文件中：build.gradle

repositories{
	flatDir{
		dirs ‘libs’
	}
}

并依赖于以下内容：

compile (name: 'highcharts-release-v6.1', ext:'aar')

在第二个选项是将库添加到gradle这个依赖关系是这样的： 在Highcharts库添加到您的build.gradle文件：

repositories { 
    maven { 
        url "https://highsoft.bintray.com/Highcharts" 
    }
}

并关注应用文件中的依赖项：build.gradle

dependencies {
    compile 'com.highsoft.highcharts:highcharts:6.1r'
}

请注意，如果您计划使用导出模块，则需要将此特定提供程序放在您的应用中：

<provider android:authorities="com.your.package.name.FileProvider"
   android:name="android.support.v4.content.FileProvider"
   android:exported="false"
   android:grantUriPermissions="true">
   <meta-data
       android:name="android.support.FILE_PROVIDER_PATHS"
       android:resource="@xml/provider_paths"/>
</provider>

并在添加provider_paths文件到xml包含此文件夹：

<?xml version="1.0" encoding="utf-8"?>
<paths>
   <files-path name="export" path="." />
</paths>

这样就完成了项目设置，现在您可以继续创建图表。

创建图表以使用Highcharts可视化团队统计信息

在本例中，我们将创建一个基本的柱形图，以显示2016/17欧洲冠军联赛中前4名球队的一些统计数据。 首先，你需要创建适当的布局中xml的图表。要执行此操作，请转到您的并确保添加以下行：activity_main.xml

<com.highsoft.highcharts.Core.HIChartView
   android:id="@+id/hc"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

创建布局后，返回onCreate方法，首先从资源创建布局并创建HIChartView类的新实例，从该布局传递上下文：MainActivity.java/code> where you create the chart. In the xml

HIChartView chartView = (HIChartView) findViewById(R.id.hc);

现在让我们来看看图表选项。该HIOptions类是负责。这个包含数据表示和渲染图表的所有必要信息。 创建HIOptions类的实例：

HIOptions options = new HIOptions();

此类的对象将用于设置图表所需的所有选项。值得注意的是，创建图表只需要其中一些（例如系列 - 将在本文后面讨论）。让我们从配置图表变量开始。为此，我们需要HIChart类：

HIChart chart = new HIChart();
chart.setType(“column”);
options.setChart(chart);

在第二行中，上面的代码我们通过HIChart类中的类型变量选择了图表类型。HIChart类提供了更多，但在我们的示例中，这个单独的变量就足够了。在最后一行中，我们在选项中添加了图表。最好一次将所有内容添加到选项对象中，以避免遗漏其中的一些内容。 在这一刻，值得给你的图表一个合适的标题：

HITitle title = new HITitle();

title.setText("UEFA Champions League 2016/17");
HISubtitle subtitle = new HISubtitle();
subtitle.setText(“Team statistics”);
options.setTitle(title);
options.setSubtitle(subtitle);

图表的标题由HITitle类管理，而HISubtitle负责字幕。设置标题对象后，我们将它们添加到选项对象中。 更改默认轴名称总是一个好主意，以便其他人更容易解释您的数据集。设置轴标题如下;

final HIYAxis hiyAxis = new HIYAxis();
hiyAxis.setMin(0);
hiyAxis.setTitle(new HITitle());
hiyAxis.getTitle().setText("Number");
options.setYAxis(new ArrayList(){{add(hiyAxis);}});

我们想要在类别xAxis上显示数据。我们将类别设置为一个ArrayList到HIXaxis对象，并将其分配给选项对象的xAxis对象（HIXaxis）。

final HIXAxis hixAxis = new HIXAxis();
ArrayList categories = new ArrayList<>();
categories.add("Goals");
categories.add("Assists");
categories.add("Shots On Goal");
categories.add("Shots");

hixAxis.setCategories(categories);
options.setXAxis(new ArrayList(){{add(hixAxis);}});

根据需要，图表可以有几个X和Y轴，这就是为什么它也作为ArrayList添加到选项中的原因。 现在，我们将配置/设置工具提示。请考虑以下代码：

HITooltip tooltip = new HITooltip();
tooltip.setHeaderFormat("<span style=\"font-size:15px\">{point.key}</span><table>");
tooltip.setPointFormat("<tr><td style=\"color:{series.color};padding:0\">{series.name}: </td>" + "<td style=\"padding:0\"><b>{point.y}</b></td></tr>");
tooltip.setFooterFormat("</talble>");
tooltip.setShared(true);
tooltip.setUseHTML(true);
options.tooltip = tooltip;

要管理工具提示，您需要创建一个HITooltip类。工具提示是一个小小部件，通过将鼠标悬停在图表上可见，显示数据点的值。您可以使用多个系列和行变量来格式化工具提示的模板。（所有格式化程序变量都在文档中说明）。 在本文中，值得注意的是，必须打开useHTML标志才能让工具提示使用HTML格式。尽管份额标志，您可以显示一个提示，但你轻点系列是否来自同一类或不显示共同的价值观。 此时，让我们添加一些特定于图表类型的选项：

HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setColumn(new HIColumn());
plotOptions.getColumn().setPointPadding(0.2);
plotOptions.getColumn().setBorderWidth(0);
options.setPlotOptions(plotOptions);

在上面的代码中，我们添加了新的HIPlotOptions类对象。此对象旨在为特定系列类型的图表中的所有系列分配特定选项。在这种情况下，此处需要设置器，因为绘图选项适用于我们的列系列。所述pointPadding被每列间添加填充空间和边框宽度设置围绕每个列中的边界的宽度。setColumn() 目前，我们只讨论柱形图中的选项。您可能会问：我们在哪里准确设置数据？

HIColumn realMadrid = new HIColumn();
realMadrid.setName("Real Madrid");
ArrayList realMadridData = new ArrayList<>();
realMadridData.add(36);
realMadridData.add(31);
realMadridData.add(93);
realMadridData.add(236);
realMadrid.setData(realMadridData);

HIColumn juventus = new HIColumn();
juventus.setName("Juventus");
ArrayList juventusData = new ArrayList<>();
juventusData.add(22);
juventusData.add(10);
juventusData.add(66);
juventusData.add(178);
juventus.setData(juventusData);

HIColumn monaco = new HIColumn();
monaco.setName("Monaco");
ArrayList monacoData = new ArrayList<>();
monacoData.add(22);
monacoData.add(17);
monacoData.add(56);
monacoData.add(147);
monaco.setData(monacoData);

HIColumn atleticoMadrid = new HIColumn();
atleticoMadrid.setName("Atl鑼卼ico Madrid");
ArrayList atleticoMadridData = new ArrayList<>();
atleticoMadridData.add(15);
atleticoMadridData.add(9);
atleticoMadridData.add(55);
atleticoMadridData.add(160);
atleticoMadrid.setData(atleticoMadridData);

在上面的长代码片段中，您可以看到我们实例化了四个单独的列。他们每个人都包含足球俱乐部的数据。我们来谈谈第一个（其余的以相同的方式完成）。首先，我们创建了负责列实现的HIColumn对象。接下来，我们为它添加了名称，并创建了另一个包含数据点的ArrayList。此时，您可能很奇怪为什么我们没有将任何列添加到选项对象中。那是因为列由HISeries对象保存。我们需要先将它们添加到系列中！见下文;

ArrayList series = new ArrayList<>();
series.add(realMadrid);
series.add(juventus);
series.add(monaco);
series.add(atleticoMadrid);

options.setSeries(series);

Series是一个包含HISeries对象的特殊ArrayList 。每个图表类型对象都扩展了HISeries类，因此我们可以毫无困难地将所有列添加到列表中。在最后一个中，我们将所有列作为一个ArrayList对象添加到选项中。 现在，当完成所有设置后，我们可以通过将配置选项分配给在开头创建的chartView来完成我们的工作：

chartView.setOptions(options);

结果如下图所示：