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