13518219792
打开highcharts.src.js，找到enabled: true, text: 'Highcharts.com',href: '',自己去掉text和href的内容，如果不想改源文件就在js里添加属性credits: { enabled: false }
我们一直强调网站建设、成都做网站对于企业的重要性,如果您也觉得重要,那么就需要我们慎重对待,选择一个安全靠谱的网站建设公司,企业网站我们建议是要么不做，要么就做好,让网站能真正成为企业发展过程中的有力推手。专业网络公司不一定是大公司,创新互联公司作为专业的网络公司选择我们就是放心。
力学图（ 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 函数中写上作图的内容。
使用原生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
方法只有一个：
通过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
你的 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);
}
但这种画法永远向著上方, 还不会转向.
你必须再调整写法.
