前端和後臺的資料傳輸是個很重要的環節.專案需要把資料用hichart顯示出來,就涉及到Django後臺傳輸資料到javascript的問題.
因為圖表比較多,javascript部分寫到單獨的js檔案裡,不寫在html檔案裡,在html中呼叫js檔案.
網上找到的很多教程,部落格都我有啟發,但是沒有完全符合我的情況.模板語言{{ }}在html檔案中可以使用,但寫在js檔案中則會報錯,而網上的教程都是把javascript直接寫在html檔案裡的,因此自己摸索了一段時間,終於學會了怎麼傳資料給前端了.也有了解過ajax和JsonResponse,需要修改很多前端小夥伴寫的程式碼,而且暫時專案的這部分不需要,因此還沒有嘗試,以後會繼續學習.

以下是實現的過程,以畫兩個餅圖作為例子,希望展示得算是比較易懂吧~
*以下程式碼都是例子化,而且只擷取最重要部分.*

原piechart.js檔案中:

$(document).ready(function(){
   var chart = {    
      backgroundColor: 'rgba(255, 255, 255, 0)',
      plotBorderColor : null,
      plotBackgroundColor: null,
      plotBackgroundImage:null,
      plotBorderWidth: null
 
,
      plotShadow: false,  
   };
.......(省略啦)
var series= [{
      type: 'pie',
      name: '佔比',
      data: [
         ['a',12],
         ['b',22],
         ['c',32],
         ['d',42]      
      ]
   }];

   var json = {};
   json.chart = chart; //chart等部分設定好後是不需要修改的
   json.series = series1; //series是傳入資料的部分
 

   $('#oPie').highcharts(json);
});

hichart圖表的javascript類似如上,有好幾個需要設定的引數,其中series是傳入資料的部分,其他都可以在javascript中書寫好.
series以這種方式書寫沒法從後臺傳入資料,修改後,把var series部分去掉,json.series部分保留,其他不變.有多個圖,每個圖的js檔案裡都是如此.
在第二個圖中:json.series = series2.其他類似.

views.py中:

def json_data(self):
        pie_series1={
      'type': 'pie',
      'name': '佔比',
      'data': [
         ['a',12],
         ['b',22],
         ['c',32],
         ['d',42]
      ]
    }
        pie_series2={
      'type': 'pie',
      'name': '佔比',
      'data': [
         ['a',12],
         ['b',22],
         ['c',32],
         ['d',42]
      ]
    }
        data1=json.dumps(pie_series,separators=(',',':'))
        data2=json.dumps(pie_series,separators=(',',':'))
        return render(request, 'index.html',{'Series1':data1,'Series2':data2})

該方法為直接在views中渲染,資料為字典格式,在傳輸前需要先轉為json格式,用json.dumps方法,separators用於壓縮空格以減小傳輸的資料的大小.若圖表很多,可以另外寫一個類去打包資料.

html檔案中:

......
<script src="../static/js/jquery-1.10.1.min.js"></script>
<script src="../static/js/highcharts.js"></script>
<script language="JavaScript" src="../static/drawjs/piechart1.js"></script>
<script language="JavaScript" src="../static/drawjs/piechart2.js"></script>
<script type="application/javascript">
    var series1=[{{ Series1|safe }}];
    var series2=[{{ Series2|safe }}];
</script>
......

在html中應用views中的資料.就是在調入js檔案的同時在下面再增加一個script用來傳資料.safe為安全過濾器.