跳至主要內容

Charts.js

Someone大约 2 分钟Frontendfrontendfigures

Charts.js, npm Frappe Charts and Echarts

In flask web framework, sometimes we need to do the data visualization, there are some popular JavaScript to do this.

Official doc latestopen in new window;

Installation

use the chart.js CDN: https://cdnjs.com/libraries/Chart.jsopen in new window

in Flask, import the .js using:

<script src="/static/js/Chart.min.js"></script>
<script src="cdn_url"></script>

npm install

Node.js package manager, we using the npm to install charts.js:

npm is written in Node.js, so we need to install Node.js. there we using the Node.js installation method, use one of the installers from the Node.js download pageopen in new window using LTS version.

to test, run node -v and npm -v.

update to the latest version,

npm install npm@latest -g

then download charts.js files form GitHubopen in new window.

Responsive Charts

Chart.js provides a few optionsopen in new window to enable responsiveness and control the resize behavior of charts by detecting when the canvas display size changes and update the render size accordingly.

options:{
    responsive: true
}

Sample

in views.py:


@main.route('/charts')
def charts():
    legend = 'Monthly Data'
    labels = ["January", "February", "March", "April", "May", "June", "July", "August"]
    values = [10, 9, 8, 7, 6, 4, 7, 8]
    return render_template('charts.html', values=values, labels=labels, legend=legend)

in charts.html:

<script src="/static/js/Chart.min.js"></script>
<script>
  // Global parameters:
  // do not resize the chart canvas when its container does (keep at 600x400px)
  Chart.defaults.global.responsive = false;

  // define the chart data
  var chartData = {
    labels: [{% for item in labels %}
  "{{item}}",
    {% endfor %}],
  datasets: [{
    label: '{{ legend }}',
    fill: true,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 1,
    pointHitRadius: 10,
    data: [{% for item in values %}
                    {{ item }},
  			{% endfor %}],
    spanGaps: false
      }]
    }

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

  // create the chart using the chart canvas
  var myChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
  });
</script>

in charts.html:


<canvas id="myChart" width="500" height="400"></canvas>

There is an example: https://gitlab.com/patkennedy79/flask_chartjs_example/tree/masteropen in new window

Frappe Charts

GitHub-inspired simple and modern SVG charts for the web with zero dependencies, see itopen in new window to build a month-wise heatmap like GitHub.

Other sample

  • add button

    <button type="button" onclick="document.getElementById('id1').style.color='red'">
    Click here
    </button>
    
  • hidden text

    <p id="p1">This is a text</p>
    
    <input type="button" value="hidden text" onclick="document.getElementById('p1').style.visibility='hidden'" />
    <input type="button" value="show text" onclick="document.getElementById('p1').style.visibility='visible'" />