如何使用javascript获取趋势线图
我试图得到一个三阶多项式趋势线，计算r平方值。我只得到了折线图。在图表中，未显示结束线。这是我的密码：如何使用javascript获取趋势线图,javascript,flot,trendline,Javascript,Flot,Trendline,我试图得到一个三阶多项式趋势线，计算r平方值。我只得到了折线图。在图表中，未显示结束线。这是我的密码： <!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=
<!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=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="js plugins/excanvas.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.min.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.symbol.min.js"></script>
<script type="text/javascript">
var data = [
[0, 11],
[1, 15],
[2, 25],
[3, 24],
[4, 13],
[5, 18],
[6, 22],
[7, 45],
[8, 33],
[9, 12],
[10, 27],
[11, 24],
[12, 20]
];
var bin = [
[0, 1],
[1, 2],
[2, 3],
[3, 4],
[4, 5],
[5, 6],
[6, 7],
[7, 8],
[8, 9],
[9, 10],
[10, 11],
[11, 12],
[12, 13],
[13, 14]
];
var dataset = [{
label: "Frequency",
data: data,
points: {
symbol: "triangle"
}
}];
var options = {
series: {
lines: {
show: true
},
points: {
radius: 3,
fill: true,
show: true
}
},
/*
series:{
bars:{
show:true
}
},
bars:{
align:"center",
barWidth:1
},
*/
xaxis: {
//mode:"",
//tickSize:[],
ticks: bin,
ticklength: 0,
axisLabel: "Bin",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
axisLabel: "Frequncy",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickFormatter: function (v, axis) {
return v + "Hz";
}
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
borderColor: "#633200",
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
},
trendline: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
},
colors: ["#FF0000", "#0022FF"]
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});
var previousPoint = null,
previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> Hz");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
</script>
</head>
<body>
<div id="flot-placeholder" style="width:450px;height:300px;margin:0 auto"> </div>
</body>
</html>
无标题文件
风险值数据=[
[0, 11],
[1, 15],
[2, 25],
[3, 24],
[4, 13],
[5, 18],
[6, 22],
[7, 45],
[8, 33],
[9, 12],
[10, 27],
[11, 24],
[12, 20]
];
var bin=[
[0, 1],
[1, 2],
[2, 3],
[3, 4],
[4, 5],
[5, 6],
[6, 7],
[7, 8],
[8, 9],
[9, 10],
[10, 11],
[11, 12],
[12, 13],
[13, 14]
];
变量数据集=[{
标签：“频率”，
数据：数据，
要点：{
符号：“三角形”
}
}];
变量选项={
系列：{
线路：{
秀：真的
},
要点：{
半径：3，
填充：是的，
秀：真的
}
},
/*
系列：{
酒吧：{
秀：真的
}
},
酒吧：{
对齐：“居中”，
条宽：1
},
*/
xaxis：{
//模式：“，
//大小：[]，
滴答声：垃圾桶，
长度：0，
axisLabel:“Bin”，
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
axisLabelFontFamily:“Verdana，Arial”，
axisLabelPadding:10
},
亚克斯：{
axisLabel:“frequency”，
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
axisLabelFontFamily:“Verdana，Arial”，
axisLabelPadding:3，
tickFormatter:函数（v，轴）{
返回v+“Hz”；
}
},
图例：{
无列：0，
labelBoxBorderColor:#000000“，
位置：“西北”
},
网格：{
悬停：是的，
边界宽度：2，
边框颜色：“633200”，
背景颜色：{
颜色：[“#ffffff”、“#EDF5FF”]
}
},
趋势线：{
类型：'多项式'，
学位：3，
visibleInLegend：是的，
},
颜色：[“FF0000”，“0022FF”]
};
$（文档）.ready（函数（）{
$.plot（$（“#flot占位符”）、数据集、选项；
$（“#flot占位符”）.UseTooltip（）；
});
var previousPoint=null，
previousLabel=null；
$.fn.UseTooltip=函数（）{
$（this）.bind（“plothover”，函数（事件、位置、项目）{
如果（项目）{
if（（previousLabel！=item.series.label）| |（previousPoint！=item.dataIndex））{
previousPoint=item.dataIndex；
previousLabel=item.series.label；
$（“#工具提示”）.remove（）；
var x=项目数据点[0]；
变量y=项目数据点[1]；
var color=item.series.color；
//console.log（item.series.xaxis.ticks[x].label）；
显示工具提示（item.pageX，
项目1.pageY，
颜色
“”+item.series.label+”
“+item.series.xaxis.ticks[x].label+”：“+y+”Hz”）；
}
}否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});
};
函数显示工具提示（x、y、颜色、内容）{
$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y-40，
左:x-120,，
边框：“2倍纯色”+彩色，
填充：“3px”，
“字体大小”：“9px”，
“边界半径”：“5px”，
“背景色”：“fff”，
“字体系列”：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
不透明度：0.9
}).appendTo（“body”）.fadeIn（200）；
}
如何在折线图中获得多项式趋势线？Flot本身不支持趋势线，您可以使用中的选项语法。如果你想要Flot中的趋势线，你必须计算它的函数，用该函数的值填充一个数组，并将该数组作为数据系列添加到你的绘图中。下面是一个线性趋势线的示例：感谢@Raidri的响应。我尝试使用google visualization，但它只支持线性和指数，不适用于Polynomilot本身不支持趋势线，请使用中的选项语法。如果你想要Flot中的趋势线，你必须计算它的函数，用该函数的值填充一个数组，并将该数组作为数据系列添加到你的绘图中。下面是一个线性趋势线的示例：感谢@Raidri的响应。我尝试使用google visualization，但它只支持线性和指数，不为多项式工作