python - 将烧瓶中的系列传递给chart.JS

问题描述

将python烧瓶中的数据框列变量传递给图表JS的最佳方法是什么？我当前的代码有效，但前提是我使用的是非常旧版本的 Chart JS。如果我更新版本，我似乎无法使用相同的方式传递变量（line_values、line_labels）。

这是我的烧瓶代码

...
line_labels=dfchart['index']
line_values=dfchart['cumulative_profit']

min = dfchart['cumulative_profit'].min()
max = dfchart['cumulative_profit'].max()
max = max+((2/100)*max)
max= round(max/10)*10
min= round(min/10)*10
max= max + abs(min)

return render_template('line_chart.html', min=min, max=max, labels=line_labels,
    values=line_values)

这是我的 HTML：

 <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>

<body>
  <center>

    <canvas id="chart" width="600" height="260"></canvas>
    <script>

      // bar chart data
      var lineData = {
        labels : [
          {% for item in labels %}
            "{{ item }}",
          {% endfor %}
        ],


        datasets : [{
          fillColor: "#e67e00",
          pointRadius: 0,
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#e67e0",
          pointHighlightFill: "#e67e0",
          pointHighlightStroke: "#e67e0",
          bezierCurve : true,
          pointRadius: 4,
          data : [
        {% for item in values %}
              {{ item }},
            {% endfor %}]
          }
    ]
      }


      Chart.defaults.global.animationSteps = 50;
      Chart.defaults.global.tooltipYPadding = 16;
      Chart.defaults.global.tooltipCornerRadius = 0;
      Chart.defaults.global.tooltipTitleFontStyle = "normal";
      Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
      Chart.defaults.global.animationEasing = "easeOutBounce";
      Chart.defaults.global.responsive = false;
      Chart.defaults.global.scaleLineColor = "#e67e0";
      Chart.defaults.global.scaleFontSize = 12;



      // get bar chart canvas
      var mychart = document.getElementById("chart").getContext("2d"); 

      steps = 10
      max = {{ max }}
      min = {{min}}

      // draw bar chart
      var LineChartDemo = new Chart(mychart).Line(lineData, {
        scaleOverride: true,
        scaleSteps: steps,
        scaleStepWidth: Math.ceil(max / steps),
        scaleStartValue: min,
        scaleShowVerticalLines: false,
        scaleShowGridLines : true,
        barShowStroke : true,
        scaleShowLabels: true,
        bezierCurve: true,
      });

    </script>
  </center>
</body>
</html>

标签： pythonflaskchart.js

python - 将烧瓶中的系列传递给chart.JS

问题描述

解决方案

推荐阅读