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

【问题标题】：How to draw line graph with JavaScript without using external libraries如何在不使用外部库的情况下使用 JavaScript 绘制折线图
【发布时间】：2012-08-15 15:26:05
【问题描述】：

简而言之：

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

我该如何管理？

【问题讨论】：

你为什么不想使用插件？谷歌图表是非常强大的工具
您需要什么样的浏览器兼容性？ SVG可以吗？帆布？这些中的任何一个都会使其相当容易，但与旧浏览器不兼容。如果您需要完全的跨浏览器兼容性，则需要使用像 Raphael 这样的库，否则您将陷入痛苦的世界。
@Diode 当然，canvas 和 svg 都可以
@SDC Chrome or IE8/9 应该支持它
@keinabel - 如果你需要 IE8 支持，那么你不能使用 Canvas 或 SVG。

标签： javascript jquery graphics graph

【解决方案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();
});

【讨论】：

Canvas 不受 IE8 支持，OP 声明他需要支持。然而，他已经接受了答案，所以人们认为他对此很满意。
@SDC 非常好，IE9 仅在 Windows 7 上可用。OP 可以使用 explorercanvas，它在旧版浏览器中模拟画布的 VML（可在 code.google.com/p/explorercanvas 获得）
嗯，是的，他可以使用它....除了他反对使用任何库。我同意你的观点，他真的应该考虑使用一个，因为没有一个他什么也做不了。

【解决方案2】：

最好的解决方案（除了外部库）可能是在 HTML5 中引入的canvas。

Here 是一个教程，您可以通过 Google 找到更多信息。

【讨论】：