使用django 產出amCharts.js 所需要的資料格式

最近在趕案子，在前輩的推薦之下，打算拋棄Chart.js 改投向amChart.js。

原因是當div空間不夠時，Chart.js的長條圖例文字會模糊不清。

不過這兩個套件要求的格式完全不同。

我們來看看amChart.js官方網站的長條圖示例。

<!-- Styles --> <style> #chartdiv { width: 100%; height: 500px; } </style> <!-- Resources --> <script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/charts.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <!-- Chart code --> <script> am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); // Add data chart.data = [{ "country": "USA", "visits": 2025 }, { "country": "China", "visits": 1882 }, { "country": "Japan", "visits": 1809 }, { "country": "Germany", "visits": 1322 }, { "country": "UK", "visits": 1122 }, { "country": "France", "visits": 1114 }, { "country": "India", "visits": 984 }, { "country": "Spain", "visits": 711 }, { "country": "Netherlands", "visits": 665 }, { "country": "Russia", "visits": 580 }, { "country": "South Korea", "visits": 443 }, { "country": "Canada", "visits": 441 }, { "country": "Brazil", "visits": 395 }]; // Create axes var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "country"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 30; categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) { if (target.dataItem && target.dataItem.index & 2 == 2) { return dy + 25; } return dy; }); var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = "visits"; series.dataFields.categoryX = "country"; series.name = "Visits"; series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]"; series.columns.template.fillOpacity = .8; var columnTemplate = series.columns.template; columnTemplate.strokeWidth = 2; columnTemplate.strokeOpacity = 1; }); // end am4core.ready() </script> <!-- HTML --> <div id="chartdiv"></div>


Note: Above is the demo code of AmCharts.js

Original site: https://www.amcharts.com/demos/simple-column-chart/

不難發現對Django來說，需要從DB裡面query出所需的Queryset，再轉換成這個套件所需要的格式，需要花上一些時間。

不過確實是好物。

下次再跟大家分享這個部分。

先這樣了，拜。