使用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，再轉換成這個套件所需要的格式，需要花上一些時間。

不過確實是好物。

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

先這樣了，拜。

Django Cheat Sheet

Recently, I came up with the deployment with Django.

Since I have got in the age that needs more record than my memory.

I'll just write them down here.

# create the directory

mkdir <project name>

cd <project name>

# In windows env, initiate virtual env.




python -m venv my_venv

my_venv\Scripts\activate

# Then install django

~/Liang$ pip install "django==3.0.4"

# Create proj folder

(my_venv) ~/Liang$ django-admin startproject mysite

cd mysite

# Create an app. eg.Login, Shopping cart.

(my_venv) ~/Liang/mysite$ python manage.py startapp <app_name>

In mysite/settings.py, add '<app_name>' in installed apps.

Then everything is done.

To reset the form after submit

Usually, we expect that after we submit a form, the information entered will be cleared.

In Angular, we set up the method we design for addpost, the thing we need to do is to call the form.resetForm. The whole post-create component would be like this:


import { Component, OnInit, } from '@angular/core';
import { NgForm } from '@angular/forms';
import { PostsServiceService } from '../posts-service.service';

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent implements OnInit {

  enteredContent = "";
  enteredTitle  = "";

  onAddPost(form: NgForm){
    if(form.invalid){
      return;
    }

  this.postService.addPost(form.value.title, form.value.content);
  form.resetForm();
  }
  constructor(public postService: PostsServiceService) { }


  ngOnInit() {
  }

}