PIE圖表-使用DataTables和Highcharts進行數據可視化
[英]PIE CHART - Data Visualization With DataTables and Highcharts
問題描述
我將表格中的所有數據綁定到一個圖形圖表，並希望添加一個餅圖。
如何像餅圖一樣將數據數組添加到餅圖中？ 我正在嘗試顯示一個餅狀圖，以顯示國家及其人口？
謝謝！
這將使我走上自己創建更多餅圖的良好途徑
這是我下面的嘗試代碼：
var draw = false; init(); /** * FUNCTIONS */ function init() { // initialize DataTables var table = $("#table").DataTable(); // get table data var tableData = getTableData(table); // create Highcharts createHighcharts(tableData); // table events setTableEvents(table); } function getTableData(table) { var dataArray = [], countryArray = [], populationArray = [], densityArray = []; ageArray = []; // loop table rows table.rows({ search: "applied" }).every(function() { var data = this.data(); countryArray.push(data[0]); populationArray.push(parseInt(data[1].replace(/\\,/g, ""))); densityArray.push(parseInt(data[2].replace(/\\,/g, ""))); ageArray.push(parseInt(data[3].replace(/\\,/g, ""))); }); // store all data in dataArray dataArray.push(countryArray, populationArray, densityArray, ageArray); return dataArray; } function createHighcharts(data) { Highcharts.setOptions({ lang: { thousandsSep: "," } }); Highcharts.chart("chart", { title: { text: "Data Chart" }, subtitle: { text: "fsvfsvvs svsdv" }, xAxis: [{ categories: data[0], labels: { rotation: -45 } }], yAxis: [{ // first yaxis title: { text: "Population (2017)" } }, { // secondary yaxis title: { text: "Density (P/Km²)" }, min: 0, opposite: true } ], series: [{ name: "Population (2017)", color: "#0071A7", type: "column", data: data[1], tooltip: { valueSuffix: " M" } }, { name: "Med Age", color: "#68cc72", type: "spline", data: data[3] // , // tooltip: { // valueSuffix: " M" // } }, { name: "Density (P/Km²)", color: "#FF404E", type: "spline", data: data[2], yAxis: 1 } ], tooltip: { shared: true }, legend: { backgroundColor: "#ececec", shadow: true }, credits: { enabled: false }, noData: { style: { fontSize: "16px" } } }); Highcharts.chart('pie', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Report Pie Chart' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'PErcentage', colorByPoint: true, data: [data[2]], }, { name: 'PErcentage', colorByPoint: true, data: [data[1]], }, { name: 'PErcentage', colorByPoint: true, data: [data[3]], } ] }); } function setTableEvents(table) { // listen for page clicks table.on("page", function() { draw = true; }); // listen for updates and adjust the chart accordingly table.on("draw", function() { if (draw) { draw = false; } else { var tableData = getTableData(table); createHighcharts(tableData); } }); }
<!DOCTYPE html> <html lang="en"> <head> <title>Reports</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/no-data-to-display.js"></script> </head> <body> <div class="container"> <h1>Reports</h1> <hr> <div class="container"> <div class="row"> <div class="col-sm-12"> <table id="table" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Country</th> <th>Population (2017)</th> <th>Density (P/Km²)</th> <th>Med. Age</th> </tr> </thead> <tbody> <tr> <td>China</td> <td>1,409,517,397</td> <td>150 </td> <td>37</td> </tr> <tr> <td>India</td> <td>1,339,180,127</td> <td>450</td> <td>27</td> </tr> <tr> <td>US</td> <td>324,459,463</td> <td>35</td> <td>38</td> </tr> <tr> <td>Indonesia</td> <td>263,991,379</td> <td>146</td> <td>28</td> </tr> <tr> <td>Brazil</td> <td>209,288,278</td> <td>25</td> <td>31</td> </tr> <tr> <td>Pakistan</td> <td>197,015,955</td> <td>256</td> <td>22</td> </tr> <tr> <td>Nigeria</td> <td>190,886,311</td> <td>210</td> <td>18</td> </tr> <tr> <td>Bangladesh</td> <td>164,669,751</td> <td>1,265</td> <td>26</td> </tr> <tr> <td>Russia</td> <td>143,989,754</td> <td>9</td> <td>39</td> </tr> <tr> <td>Mexico</td> <td>129,163,276</td> <td>66</td> <td>28</td> </tr> <tr> <td>Japan</td> <td>127,484,450</td> <td>350</td> <td>46</td> </tr> <tr> <td>Ethiopia</td> <td>104,957,438</td> <td>105</td> <td>19</td> </tr> <tr> <td>Philippines</td> <td>104,918,090</td> <td>352</td> <td>24</td> </tr> <tr> <td>Egypt</td> <td>97,553,151</td> <td>98</td> <td>25</td> </tr> <tr> <td>Viet Nam</td> <td>95,540,800</td> <td>308</td> <td>30</td> </tr> <tr> <td>Germany</td> <td>82,114,224</td> <td>236</td> <td>46</td> </tr> <tr> <td>DR Congo</td> <td>81,339,988</td> <td>36</td> <td>17</td> </tr> <tr> <td>Iran</td> <td>81,162,788</td> <td>50</td> <td>30</td> </tr> <tr> <td>Turkey</td> <td>80,745,020</td> <td>105</td> <td>30</td> </tr> <tr> <td>Thailand</td> <td>69,037,513</td> <td>135</td> <td>38</td> </tr> <tr> <td>UK</td> <td>66,181,585</td> <td>274</td> <td>40</td> </tr> <tr> <td>France</td> <td>64,979,548</td> <td>119</td> <td>41</td> </tr> <tr> <td>Italy</td> <td>59,359,900</td> <td>202</td> <td>46</td> </tr> <tr> <td>Tanzania</td> <td>57,310,019</td> <td>65</td> <td>17</td> </tr> <tr> <td>South Africa</td> <td>56,717,156</td> <td>47</td> <td>26</td> </tr> </tbody> </table> </div> <div class="col-sm-12"> <div id="chart"></div> </div> <div class="col-sm-12"> <div id="pie"></div> </div> </div> </div> </div> <script> $(document).ready(function() { $('#table').DataTable(); }); </script> <script src="./script.js"></script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2018-10-08 10:53:18
在pie類型中，一個序列表示一個餅圖，因此您應按以下方式定義數據：
series: [{
name: 'PErcentage',
colorByPoint: true,
data: data[1]
}]
Highcharts：在餅圖部分的中間放置數據標簽
[英]Highcharts: Placement of data labels in the middle of sections of Pie Chart
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.