87,904
社区成员
发帖
与我相关
我的任务
分享jquery走势图，求助，急
怎么用jquery画出http://data.house.sina.com.cn/xm92210/jiage/ 这样的两张走势图，跪求！！！
...全文
请发表友善的回复…
发表回复
xjpphp 2012-10-10
- 打赏
- 举报
[Quote=引用 5 楼 的回复:]
sina用的也是别人的flash绘图的，open flash chart，不过进行了修改
flash地址
http://data.house.sina.com.cn/images/price_trend/open-flash-chart-new.swf
数据源
JScript code
{
"elements":[
{"type":"line"//折线图，其他类型可以去 htt……
[/Quote]
非常感谢
sina用的也是别人的flash绘图的，open flash chart，不过进行了修改
flash地址
http://data.house.sina.com.cn/images/price_trend/open-flash-chart-new.swf
数据源
JScript code
{
"elements":[
{"type":"line"//折线图，其他类型可以去 htt……
[/Quote]
非常感谢
Go 旅城通票 2012-10-10
- 打赏
- 举报
sina用的也是别人的flash绘图的，open flash chart，不过进行了修改
flash地址
http://data.house.sina.com.cn/images/price_trend/open-flash-chart-new.swf
数据源
自己按照数据结构修改下配置就好了
flash地址
http://data.house.sina.com.cn/images/price_trend/open-flash-chart-new.swf
数据源
{
"elements":[
{"type":"line"//折线图，其他类型可以去 http://teethgrinder.co.uk/open-flash-chart-2/area-hollow.php 这里看，很多种
,"colour":"#003299"
,"font-size":10
,"width":2
,"dot-style":{"type":"hollow-dot","colour":"#003299","dot-size":4,"halo-size":1}
,"valueStyle":[1,1,0,1]//这个是控制顶点是否显示圆圈用的，1为圆圈，0为虚线点
,"values":[17000,20650,18500,16350]
,"betweenStyle":[1,1,0,0]//控制顶点之间显示的是实现还是虚线用的，1为实线，0为虚线
,"localLetter":[]
,"localLetterIndex":[]
,"localLetterOver":[]
,"line-style":{"style":"free","on":2,"off":5}
}]//end elements
,"x_axis":{"rotate":"vertical","offset":"false","stroke":0,"colour":"#c6d9fd","grid-colour":"#dddddd","min":0,"steps":1,"labels":{"labels":["2012-07","2012-08","2012-09","2012-10"]}}
,"y_axis":{"min":14000,"max":22000,"stroke":1,"colour":"#003299","grid_colour":"#dddddd","steps":500}
,"bg_colour":"#ffffff"
}自己按照数据结构修改下配置就好了
xingqiliudehuanghun 2012-10-10
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
<p>Flot supports lines, points, filled areas, bars and any
combinations of these, in the same plot and even on the same data
series.</p>
<script type="text/javascript">
/*
* jQuery.flot.dashes
*
* options = {
* series: {
* dashes: {
*
* // show
* // default: false
* // Whether to show dashes for the series.
* show: <boolean>,
*
* // lineWidth
* // default: 2
* // The width of the dashed line in pixels.
* lineWidth: <number>,
*
* // dashLength
* // default: 10
* // Controls the length of the individual dashes and the amount of
* // space between them.
* // If this is a number, the dashes and spaces will have that length.
* // If this is an array, it is read as [ dashLength, spaceLength ]
* dashLength: <number> or <array[2]>
* }
* }
* }
*/
(function($){
function init(plot) {
plot.hooks.drawSeries.push(function(plot, ctx, series) {
if (!series.dashes.show) {
return;
}
var plotOffset = plot.getPlotOffset();
function plotDashes(datapoints, xoffset, yoffset, axisx, axisy) {
var points = datapoints.points,
ps = datapoints.pointsize,
prevx = null,
prevy = null,
dashRemainder = 0,
dashOn = true,
dashOnLength,
dashOffLength;
if (series.dashes.dashLength[0]) {
dashOnLength = series.dashes.dashLength[0];
if (series.dashes.dashLength[1]) {
dashOffLength = series.dashes.dashLength[1];
} else {
dashOffLength = dashOnLength;
}
} else {
dashOffLength = dashOnLength = series.dashes.dashLength;
}
ctx.beginPath();
for (var i = ps; i < points.length; i += ps) {
var x1 = points[i - ps],
y1 = points[i - ps + 1],
x2 = points[i],
y2 = points[i + 1];
if (x1 == null || x2 == null) continue;
// clip with ymin
if (y1 <= y2 && y1 < axisy.min) {
if (y2 < axisy.min) continue; // line segment is outside
// compute new intersection point
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
y1 = axisy.min;
} else if (y2 <= y1 && y2 < axisy.min) {
if (y1 < axisy.min) continue;
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
y2 = axisy.min;
}
// clip with ymax
if (y1 >= y2 && y1 > axisy.max) {
if (y2 > axisy.max) continue;
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
y1 = axisy.max;
} else if (y2 >= y1 && y2 > axisy.max) {
if (y1 > axisy.max) continue;
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
y2 = axisy.max;
}
// clip with xmin
if (x1 <= x2 && x1 < axisx.min) {
if (x2 < axisx.min) continue;
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
x1 = axisx.min;
} else if (x2 <= x1 && x2 < axisx.min) {
if (x1 < axisx.min) continue;
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
x2 = axisx.min;
}
// clip with xmax
if (x1 >= x2 && x1 > axisx.max) {
if (x2 > axisx.max) continue;
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
x1 = axisx.max;
} else if (x2 >= x1 && x2 > axisx.max) {
if (x1 > axisx.max) continue;
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
x2 = axisx.max;
}
if (x1 != prevx || y1 != prevy) {
ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
}
var ax1 = axisx.p2c(x1) + xoffset,
ay1 = axisy.p2c(y1) + yoffset,
ax2 = axisx.p2c(x2) + xoffset,
ay2 = axisy.p2c(y2) + yoffset,
dashOffset;
function lineSegmentOffset(segmentLength) {
var c = Math.sqrt(Math.pow(ax2 - ax1, 2) + Math.pow(ay2 - ay1, 2));
if (c <= segmentLength) {
return {
deltaX: ax2 - ax1,
deltaY: ay2 - ay1,
distance: c,
remainder: segmentLength - c
}
} else {
var xsign = ax2 > ax1 ? 1 : -1,
ysign = ay2 > ay1 ? 1 : -1;
return {
deltaX: xsign * Math.sqrt(Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))),
deltaY: ysign * Math.sqrt(Math.pow(segmentLength, 2) - Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))),
distance: segmentLength,
remainder: 0
};
}
}
//-end lineSegmentOffset
do {
dashOffset = lineSegmentOffset(
dashRemainder > 0 ? dashRemainder :
dashOn ? dashOnLength : dashOffLength);
if (dashOffset.deltaX != 0 || dashOffset.deltaY != 0) {
if (dashOn) {
ctx.lineTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY);
} else {
ctx.moveTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY);
}
}
dashOn = !dashOn;
dashRemainder = dashOffset.remainder;
ax1 += dashOffset.deltaX;
ay1 += dashOffset.deltaY;
} while (dashOffset.distance > 0);
prevx = x2;
prevy = y2;
}
ctx.stroke();
}
//-end plotDashes
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
ctx.lineJoin = 'round';
var lw = series.dashes.lineWidth,
sw = series.shadowSize;
// FIXME: consider another form of shadow when filling is turned on
if (lw > 0 && sw > 0) {
// draw shadow as a thick and thin line with transparency
ctx.lineWidth = sw;
ctx.strokeStyle = "rgba(0,0,0,0.1)";
// position shadow at angle from the mid of line
var angle = Math.PI/18;
plotDashes(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis);
ctx.lineWidth = sw/2;
plotDashes(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis);
}
ctx.lineWidth = lw;
ctx.strokeStyle = series.color;
if (lw > 0) {
plotDashes(series.datapoints, 0, 0, series.xaxis, series.yaxis);
}
ctx.restore();
});
//-end drawSeries hook
}
//-end init
$.plot.plugins.push({
init: init,
options: {
series: {
dashes: {
show: false,
lineWidth: 2,
dashLength: 10
}
}
},
name: 'dashes',
version: '0.1b'
});
})(jQuery)
$(function () {
$.plot($("#placeholder"), [
{
data: [[1, 1], [2, 2], [3,3], [4, 4], [5,5]],
lines: { show: true },
points: { show: true }
},
{
data: [[5, 5], [6, 3], [7, 2], [8, 6], [9, 9]],
lines: { show: false},
points: { show: true },
dashes: { show: true }
}
]);
});
</script>
</body>
</html>
xjpphp 2012-10-09
- 打赏
- 举报
[Quote=引用 1 楼 的回复:]
很多绘图插件都可以画啊，如google chart
网页绘图
[/Quote]
大哥，你做过没，给点代码吧！那个有虚线有实线的不知道怎么搞
很多绘图插件都可以画啊，如google chart
网页绘图
[/Quote]
大哥，你做过没，给点代码吧！那个有虚线有实线的不知道怎么搞
Go 旅城通票 2012-10-09
- 打赏
- 举报
很多绘图插件都可以画啊，如google chart
网页绘图
网页绘图
