phpchartswrapper技巧_Highcharts教程Highcharts Android包装教程

在本教程中，我将向您展示如何利用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);

结果如下图所示：

点击“理解更多”下载产品最新版

↓↓↓