javascript作图,jquery画图

js画图原理或工具

打开highcharts.src.js，找到enabled: true, text: 'Highcharts.com',href: '',自己去掉text和href的内容，如果不想改源文件就在js里添加属性credits: { enabled: false }

相关问答

Q1: d3.js画力学图,怎么把图限制在边框内

力学图（ Force ），也有被翻译做力导向图等。这种图很有意思，先从初始数据开始，看下面代码：

var nodes = [ { name: "GuiLin" },

{ name: "GuangZhou" },

{ name: "XiaMen" },

{ name: "HangZhou" },

{ name: "ShangHai" },

{ name: "QingDao" },

{ name: "TianJin" },

{ name: "BeiJing" },

{ name: "ChangChun" },

{ name: "XiAn" },

{ name: "WuluMuQi" },

{ name: "LaSa" },

{ name: "ChengDu" } ];

var edges = [ { source : 0 , target: 1 } ,

{ source : 1 , target: 2 } ,

{ source : 2 , target: 3 } ,

{ source : 3 , target: 4 } ,

{ source : 4 , target: 5 } ,

{ source : 5 , target: 6 } ,

{ source : 6 , target: 7 } ,

{ source : 7 , target: 8 } ,

{ source : 8 , target: 9 } ,

{ source : 9 , target: 10 } ,

{ source : 10 , target: 11 } ,

{ source : 11 , target: 12 } ,

{ source : 12 , target: 0 } ];

这里有顶点（ nodes ）和边（ edges ），这里的顶点是一些城市名称，边是两个顶点之间的连线。我们现在要用这些数据来做力学图。但是这样的数据不适合做力学图，比如不知道每一个顶点画在哪个坐标等。所以需要先用 Layout 来转换数据，我们说过， D3 中的 Layout 就是用来转换数据的。 force 的 layout 为：

var force = d3.layout.force()

.nodes(nodes)

.links(edges)

.size([width,height])

.linkDistance(200)

.charge([-100])

.start();

在上面的代码中：

d3.layout.force() 是力学图 Layout 的函数

nodes() 里传入顶点的数组

links() 里放入边的数组

size() 是作用域的大小

linkDistance() 用于设定两个顶点之间的长度

charge() 是设定弹力的大小。

start() 表示开始转换

调用这个函数后，数据就已经被转换了，我们看看数据从什么转换成什么了：

顶点（转换前）：

顶点（转换后）：

可以看到，转换后，多了 index ， px ， py 等。

再来看看边的数据：

边（转换前）：

边（转换后）：

可以看到，边数据的两个索引号直接被转换成了两个顶点的数据。

好了，有了这些数据，我们就可以作图了。我们用 SVG 中的 line 画边，用 SVG 中的 circle 画顶点。

var svg_edges = svg.selectAll("line")

.data(edges)

.enter()

.append("line")

.style("stroke","#ccc")

.style("stroke-width",1);

var color = d3.scale.category20();

var svg_nodes = svg.selectAll("circle")

.data(nodes)

.enter()

.append("circle")

.attr("r",10)

.style("fill",function(d,i){

return color(i);

})

.call(force.drag);

这样的代码我们已经很熟悉了，只有最后一句代码没出现过， call( force.drag ) 是设定我们可以拖动顶点。这个 call 函数我们前面说过，这个 call 是用于将当前选择的元素传到 force.drag 函数中。

最后，我们还需要一段代码，如下：

force.on("tick", function(){

svg_edges.attr("x1",function(d){ return d.source.x; });

svg_edges.attr("y1",function(d){ return d.source.y; });

svg_edges.attr("x2",function(d){ return d.target.x; });

svg_edges.attr("y2",function(d){ return d.target.y; });

svg_nodes.attr("cx",function(d){ return d.x; });

svg_nodes.attr("cy",function(d){ return d.y; });

});

tick 指的是时间间隔，也就是每一个时间间隔之后就刷新一遍画面，刷新的内容写在后面的无名函数 function 中， function 函数中写上作图的内容。

Q2: html怎么用js特效做折线图

使用原生js自己写或js库（框架）都是可以的，由于目前HTML5并不是所有的浏览器都完美支持，使用兼容性比较好的js库是个不错的选择。

例如Highcharts图标库就可以实现各类曲线图、折线图、区域图、3D图、柱状图等等。具体使用参考：。

Highcharts中做折线图的demo代码可以作为参考：

html lang="en"

head

  script type="text/javascript" src=""/script

  script type="text/javascript" src=""/script

  script type="text/javascript" src=""/script

  script

    $(function () {

    $('#container').highcharts({

        chart: {

            type: 'line'

        },

        title: {

            text: 'Monthly Average Temperature'

        },

        subtitle: {

            text: 'Source: WorldClimate.com'

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'

            }

        },

        tooltip: {

            enabled: false,

            formatter: function() {

                return 'b'+ this.series.name +'/bbr/'+this.x +': '+ this.y +'°C';

            }

        },

        plotOptions: {

            line: {

                dataLabels: {

                    enabled: true

                },

                enableMouseTracking: false

            }

        },

        series: [{

            name: 'Tokyo',

            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

        }, {

            name: 'London',

            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

        }]

    });

});

  /script

/head

body

  div id="container" style="min-width:700px;height:400px"/div

/body

/html

Q3: Javascript如何在网页上实现画图功能

方法只有一个：

    通过canvas的方式，在画布上画图

步骤：

1、定义一个canvas

2、获取canvas，然后通过画图

示例：canvas 元素来显示一个红色的矩形

canvas id="myCanvas"/canvas//定义一个canvas

script type="text/javascript"

var canvas=document.getElementById('myCanvas');//获取canvas

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000'; //图形填充色

ctx.fillRect(0,0,80,100); //绘制一个红色矩形

/script

Q4: js画图中怎么样才能让自己画的图形动起来

你的 paintComponent 中用的都是常数, 没用到 myhero 的数据, 当然不会动!

我稍为改一下就会动了:

public void paintComponent(Graphics g)

{

super.paintComponent(g);

int x=myhero.x, y=myhero.y;

g.fillRect(x+50, y+80, 7, 40);

g.fillRect(x+57,y+87,20,24);

g.fillRect(x+77,y+80,7,40);

g.setColor(Color.red);

g.fillOval(x+59,y+92,15,15);

g.setColor(Color.black);

g.fillRect(x+65,y+68,5,24);

}

但这种画法永远向著上方, 还不会转向.

你必须再调整写法.