Question

我在php中创建一个有图表的网站，图片显示在 enter image description here

下面

我已经搜索了很多，但我找不到这样的图。任何身体都会帮忙。

Answer 1

尝试amchart，请参阅此链接http://www.amcharts.com/javascript。

我在jsfiddle checkout中添加了一个工作演示http://jsfiddle.net/limijerin/DF8w2/9/

Answer 2

您可能希望从查看canvas元素开始，它看起来像填充颜色应该做你想要的。

这是一个很好的介绍：

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas

基本上，您将创建画布，并且可以将文本放在其上，但我不确定IE9是否允许您绘制文本。

以下是有关如何在Firefox中执行此操作的链接：

https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas

然后只需在每个图形的底部用一条线从一点到另一点绘制线条，然后使用填充颜色。

Answer 3

要成功搜索，有助于了解该类图表的名称。这种图形称为sparkline。现在您知道它的名称，您可以搜索它。

谷歌搜索“javascript sparkline”会产生大量结果，以下是最佳结果：

Answer 4

JavaScript可用于动态生成包含用户提供的数据的条形图。这是由于条形图的简单性，其简单地由不同长度的图像组成。我们使用JavaScript动态写出每个图像，每个图像的长度使用输入的数据计算。

我们所需要的只是一个简单的1x15图像来启动：

如果我想将此图像拉伸到50x15，我可以使用JavaScript生成图像：

<script>
document.write(<img src="poll.gif" width="50" height="15">')
</script>

这就构成了动态条形图的基础！这是我编写的一个简单脚本，它演示了使用JavaScript创建图形的工作示例：

<script>
var graphtext=new Array("Jill", "Bob", "Tony") //Graph items
var graphvalue=new Array("60", "45", "95") //Graph values (in percentage, so 70=70%)
var barlength=200
for (i=0;i<graphtext.length;i++)
document.write (graphtext[i]+
    ': <img src="poll.gif" width="'+
    graphvalue[i]/100*barlength+
    '" height="15"><br>')
</script>

吉尔：

鲍勃：

Tony

这里的秘密是代码：

width="'+graphvalue[i]/100*barlength+'"

这使得图形的宽度是动态的，并且基于用户提供的数据。基本上每个宽度是通过将输入值除以100来得到它的百分比等值，然后乘以基线条图像长度得出的。

你有它！使用JavaScript可以生成动态图表。您可能希望从JavaScript Kit中查看名为JavaScript Graph-It的脚本，这是一个用户友好且更复杂的JS图形脚本。这就是我从中获得本教程的一般概念的地方。

OR

您可以使用jQuery和HTML5来完成。请按照以下链接获取教程。

http://www.catswhocode.com/blog/how-to-easily-create-charts-using-jquery-and-html5

我该如何绘制javascript图表

4 个答案: