Create Simple HTML Charts Using Canvas: Line or Rectangular Statistics (Original)

Add-ons

2026-07-26 04:24 3 次浏览 • 0 次下载 3.0KB

Create Simple HTML Charts Using Canvas: Line or Rectangular Statistics (Original)

Plugin Description: Create simple HTML charts using canvas, including line charts and rectangular statistical charts.

Create simple HTML charts using canvas, including line charts and rectangular statistical charts. Simple and practical. The charts are created by the Ctable class, which is already implemented. You can directly include and use it. If you are interested, you can also examine the source code.

note:, this class file does not depend on any libraries (such as jQuery). Ctable.js file: click here.

The specific usage is as follows:

/*
    The chart dimensions are controlled by the CSS size of the element with the ID ctable.
*/
// Create an instance
var ctb = new Ctable('ctable');
// Test data
var data_tmp = [
    [0, 7, '2019-06', 'Day', 'Times', 15, []],
    [1, 5, '2019-06', 'Day', 'Times', 15, []],
    [2, 3, '2019-06', 'Day', 'Times', 15, []],
    [3, 39, '2019-06', 'Day', 'Times', 15, []],
    [4, 1, '2019-06', 'Day', 'Times', 15, []],
    [4, 9, '2019-06', 'Day', 'Times', 15, []],
    [4, 9, '2019-06', 'Day', 'Times', 15, []],
    [4, 9, '2019-06', 'Day', 'Times', 15, []],
    [4, 9, '2019-06', 'Day', 'Times', 15, []],
    [0, 7, '2019-06', 'Day', 'Times', 15, []]
];
/*
$.get('https://www.****.com/api',function(res) {
    // API usage
    var ar=JSON.parse(res);
    console.log(ar);
    ctb.setData(ar);
    ctb.drawline(1);
})
*/
// Set data
ctb.setData(data_tmp);
// Draw the chart
ctb.drawline(1); // Line chart: The difference parameter 1|true indicates whether to create scale markings (coordinate axes).
//ctb.drawrect(1);// Rectangle chart
//ctb.clear();// Clear the chart