下載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 "//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);

結果如下圖所示：

購買Highcharts正版授權，請點擊“”喲！