2020年7月13日 星期一

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

不過確實是好物。

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

先這樣了,拜。


2020年7月11日 星期六

Django針對欄位計算百分比

https://stackoverflow.com/questions/19286834/django-calculate-percentage-based-on-object-count

以上是原文出處。

基本上,這個回答的重點是在儲存問卷相關值時,其實應該儲存成不同的model class。

<model name>.objects.values('<group by 欄位名稱>').annotate(<計算出來欄位名稱>=Count('id')).order_by()

*SQL裡面你可以group by很多欄位,這裡也可以,例如:Book.objects.values('name', 'code').annotate(count=Count('id')).order_by

這樣會預設按照query結果的第一個欄位排序,例如:name, 而不是計算出來欄位名稱

2020年7月7日 星期二

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.

2019年10月29日 星期二

中國國際航空出發前改票攻略

既然名為改票,你手上一定有一張你不想飛的機票,通常是日期不符合需求,

這個時候,你就得打電話進去,跟客服說你打算改票,

好的客服會聆聽你到需求,幫你找最符合你要求日子的航班。

然後送票務(那個苦命一直算價差的人) 批 改票總費用。(這是他們用的動詞,批)

也有的客服直接告訴你,你想要的航班要花多少錢改票,就沒他的事了。



今天就來跟大家說說,怎麼樣自己先查好最符合自己需求的票,減少打國航熱線,那個永遠都在,"尊敬的旅客您好,由於目前來電到旅客較多,您等待的時間較長,您也可以發送郵件至。。。。"的熱線。


首先,目前國航改票規則是,出發前改,無論改幾段,只改去程,只改回程,去回都改,還是你這張票本來就有n段,又去日本又去歐洲,再逛個美國,最後回台灣。改票費每次,每人,就算一次。所以以歐洲線常見的130歐元改票費來說,這是你跑不掉的成本。

其次,要補差價,你可以想成,國航把你已經付出的金額,當作一張折價券,所以目標日期的票價,是越低越好。你可以先在國航網站上面找和你打算改的出發回程日期最貼近,不過最便宜的票。

因此衍生一個小撇步,就是要改票,最好趁國航正在促銷的時候改,因為國航歐洲出發通常促銷時間落在每個月到最後一個周末,或是當地重大節慶。



另外,假設本來買的票在北京轉機,但是我需要的那天北京轉機的票已經超貴了,上海轉機的還很便宜,那就可以跟客服說,請他幫你看改上海轉機的。

這邊給大家一個例子,原本票是380歐買的,現在要改的日期,官網上來回會是420歐。那我就必須付出420新的官網票價-380舊的已付票價+130官方改票費+n歐的旅行社改票費用。梁哥一直以來都官網買,這樣就是170歐/人。

不過有時候會有淡旺季價差,像梁哥這次要回台灣,就從淡季要改到次淡季,得加上保護費80歐。。。。梁小妹的奶粉錢阿~~




假設剛好就要月底了,我可以預期到時候會特價390歐,那我在月底的時候改票,就只要付390歐打電話當日最新票價-380歐舊的已付票價+130官方改票費 = 140歐了。


總是希望大家都不需要用到改票,一切順心嘍。

2019年10月22日 星期二

Ionic怎麼發布?

辛辛苦苦用ionic寫好了個app,

偏偏發現這條發布的路,沒有想像中簡單。

首先要定義android 路徑,

再來要定義jdk路徑,

怎麼弄呢?

首先要編輯
sudo gedit /etc/profile
再來,


JAVA_HOME=/home/hans/Software/jdk1.8.0_231
export PATH=${JAVA_HOME}/bin:${PATH}
export JAVA_HOME

export ANDROID_HOME=/home/hans/Android/Sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

export PATH="/Library/Frameworks/Python.framework/Versions/3.6/bin:${PATH}" 
最後,你可以在terminal輸入
cordova build android

就會儲存可以安裝的測試apk檔到
<你的專案路徑>/platforms/android/app/build/outputs/apk/debug/app-debug.apk





2019年10月4日 星期五

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() {
  }

}

2019年9月27日 星期五

慕尼黑延簽系统教學

梁哥畢業之後,發現延簽真不容易阿。死活都找不到鏈接。

所以寫了這篇文章記錄一下。

首先需要進入首頁,


再選擇身份,本例為找工作簽證。




點下去之後,會有需要攜帶的文件,我們在Formulare & Links 这里,直接點下預約連接。




確認你的身份後,就選擇人數。


 可以預約的時間:


就可以到郵箱收信,點擊確認鏈接,就完成了。