javascript - 如何在不使用外部库的情况下使用 JavaScript 绘制折线图

Question

简而言之:

我想在不使用(开源)库的情况下使用 JavaScript 绘制折线图。我只使用 JavaScript 和 jQuery(无插件!)。

我该如何管理？

Answer 1

我认为您忽略了 some very powerful libraries ，但是，如果您决定自己执行此操作，则需要使用 HTML5 和 Canvas 对象。看看at this great tutorial让你开始。以下是您需要掌握的内容的简要说明:

$(document).ready(function() {
    var graph = $('#graph'),
        c = graph[0].getContext('2d');

    c.lineWidth = 2;
    c.strokeStyle = '#333';
    c.font = 'italic 8pt sans-serif';
    c.textAlign = "center";

    c.beginPath();
    c.moveTo(xPadding, 0);
    c.lineTo(xPadding, graph.height() - yPadding);
    c.lineTo(graph.width(), graph.height() - yPadding);
    c.stroke();
});