【Highcharts教程】Highcharts Android包装教程

在本教程中，我将向您展示如何使用Highcharts Android包装器创建交互式图表以显示UEFA冠军数据。

下载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包含此文件夹：

<ml version="1.0" encoding="utf-8"gt;<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 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;

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

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

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);

结果如下图所示：

购买Highcharts正版授权，请点击“咨询在线客服”哟！

标签：图表图表控件highcharts”