【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);
結果如下圖所示：
