如何使用JavaScript绘制折线图而不使用外部库

时间:2012-08-15 15:26:06

标签: javascript jquery graphics graph

简而言之:

我想用JavaScript绘制线图而不使用(开源)库。我所有的工作都是JavaScript和jQuery(没有插件!)。

我该如何管理?

2 个答案:

答案 0 :(得分:6)

我认为你忽略了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();
});

答案 1 :(得分:3)

最好的解决方案(除了外部库)可能是HTML5中引入的canvas

Here是一个教程,您可以在Google上找到更多信息。