Pythonフラスコフレームワークを使用してハイチャートプロットの日付としてx軸を設定します

Question

私はウェブページのようなダッシュボードを生成するためにPythonフラスコフレームワークを使用しています。チャート作成ツールとしてハイチャートを使用します。 test3.htmlテンプレートで：

{% extends "base.html" %} 
{% block head %} 
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script> 

<script type="text/javascript"> 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Average Monthly Temperature and Rainfall in Tokyo' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: [{ 
      categories: '{{chart_x}}', 
      crosshair: true 
     }], 
     yAxis: [{ // Primary yAxis 
      labels: { 
       format: '{value}°C', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      }, 
      title: { 
       text: 'Temperature', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Rainfall', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      labels: { 
       format: '{value} mm', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      opposite: true 
     }], 
     tooltip: { 
      shared: true 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'left', 
      x: 120, 
      verticalAlign: 'top', 
      y: 100, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
     }, 
     series: [{ 
      name: 'Rainfall', 
      type: 'column', 
      yAxis: 1, 
      data: {{chart_y1}}, 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Temperature', 
      type: 'spline', 
      data: {{chart_y2}}, 
      tooltip: { 
       valueSuffix: '°C' 
      } 
     }] 
    }); 
}); 
</script> 
{% endblock %} 
{% block content %} 
<h2>first chart</h2> 
<div id="container" style="height: 300px"></div> 



{% endblock %} 

とview.pyで：

@app.route('/test3') 
def test3(): 
    return render_template("test3.html", 
          title='test3', 
          chart_x=['2014-04-11','2014-04-14','2014-04-15','2014-04-16','2014-04-17','2014-04-18','2014-04-21','2014-04-22','2014-04-23','2014-04-24','2014-04-25','2014-04-28'], 
          chart_y1=[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
          chart_y2=[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
          ) 

私が手プロットはのようなものです：あなたが見ることができたよう

、 x軸は日付としてラベル付けされていません。正しく設定する方法がわかりません。誰でも助けることができますか？

Answer 1

問題は、あなたが持っている：

xAxis: [{ 
     categories: '{{chart_x}}', 
     crosshair: true 
    }], 

ている間は、次のようになります。

xAxis: [{ 
     categories: {{chart_x}}, 
     crosshair: true 
    }],