Javascript Flot绘制条形图
我尝试使用Flot for JQUery绘制以下图表： 其中A、B、C和D是营销工作 我有以下示例代码：Javascript Flot绘制条形图,javascript,jquery,flot,Javascript,Jquery,Flot,我尝试使用Flot for JQUery绘制以下图表： 其中A、B、C和D是营销工作 我有以下示例代码： var data = [ ["January", 10,80], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ]; $.plot("#catchart", [ data ], { series: { bars: {
var data = [ ["January", 10,80], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
$.plot("#catchart", [ data ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
但这只会为每个类别绘制一列。如何使每个类别的两列“成对”或在一起？这可以使用类别插件以及
以下是。我重新发布了我删除的答案，因为它帮助了人们。我添加了解决代码 在这里找到答案：谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flot Bar Chart</title>
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h1 { width: 450px; margin: 0 auto; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative; margin: 0 auto; }
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
#flot-tooltip { font-size: 12px; font-family: Verdana, Arial, sans-serif; position: absolute; display: none; border: 2px solid; padding: 2px; background- color: #FFF; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"> </script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.orderBars.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var d1_1 = [
[1325376000000, 120],
[1328054400000, 70],
[1330560000000, 100],
[1333238400000, 60],
[1335830400000, 35]
];
var d1_2 = [
[1325376000000, 80],
[1328054400000, 60],
[1330560000000, 30],
[1333238400000, 35],
[1335830400000, 30]
];
var d1_3 = [
[1325376000000, 80],
[1328054400000, 40],
[1330560000000, 30],
[1333238400000, 20],
[1335830400000, 10]
];
var d1_4 = [
[1325376000000, 15],
[1328054400000, 10],
[1330560000000, 15],
[1333238400000, 20],
[1335830400000, 15]
];
var data1 = [
{
label: "Product 1",
data: d1_1,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#AA4643"
},
color: "#AA4643"
},
{
label: "Product 2",
data: d1_2,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 2,
fillColor: "#89A54E"
},
color: "#89A54E"
},
{
label: "Product 3",
data: d1_3,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 3,
fillColor: "#4572A7"
},
color: "#4572A7"
},
{
label: "Product 4",
data: d1_4,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 4,
fillColor: "#80699B"
},
color: "#80699B"
}
];
$.plot($("#placeholder"), data1, {
xaxis: {
min: (new Date(2011, 11, 15)).getTime(),
max: (new Date(2012, 04, 18)).getTime(),
mode: "time",
timeformat: "%b",
tickSize: [1, "month"],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0, // hide gridlines
axisLabel: 'Month',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
yaxis: {
axisLabel: 'Value',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {
shadowSize: 1
}
});
function showTooltip(x, y, contents, z) {
$('<div id="flot-tooltip">' + contents + '</div>').css({
top: y - 20,
left: x - 90,
'border-color': z,
}).appendTo("body").show();
}
function getMonthName(newTimestamp) {
var d = new Date(newTimestamp);
var numericMonth = d.getMonth();
var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var alphaMonth = monthArray[numericMonth];
return alphaMonth;
}
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#flot-tooltip").remove();
var originalPoint;
if (item.datapoint[0] == item.series.data[0][3]) {
originalPoint = item.series.data[0][0];
} else if (item.datapoint[0] == item.series.data[1][3]){
originalPoint = item.series.data[1][0];
} else if (item.datapoint[0] == item.series.data[2][3]){
originalPoint = item.series.data[2][0];
} else if (item.datapoint[0] == item.series.data[3][3]){
originalPoint = item.series.data[3][0];
} else if (item.datapoint[0] == item.series.data[4][3]){
originalPoint = item.series.data[4][0];
}
var x = getMonthName(originalPoint);
y = item.datapoint[1];
z = item.series.color;
showTooltip(item.pageX, item.pageY,
"<b>" + item.series.label + "</b><br /> " + x + " = " + y + "°C",
z);
}
} else {
$("#flot-tooltip").remove();
previousPoint = null;
}
});
});
</script>
</head>
<body>
<h1>Average Maximum Temperatures</h1>
<div id="placeholder"></div>
</body>
</html>
弗洛特条形图
正文{字体系列：Verdana，Arial，无衬线；字体大小：12px；}
h1{宽度：450px；边距：0自动；字体大小：12px；文本对齐：中心；}
#占位符{宽度：450px；高度：200px；位置：相对；边距：0自动；}
.legend表格.legend>div{高度：82px！重要；不透明度：1！重要；右侧：-55px；顶部：10px；宽度：116px！重要；}
.图例表{边框：1px实心#555；填充：5px；}
#flot工具提示{字体大小：12px；字体系列：Verdana，Arial，无衬线；位置：绝对；显示：无；边框：2px实心；填充：2px；背景-颜色：#FFF；不透明度：0.8；-moz边框半径：5px；-webkit边框半径：5px；-khtml边框半径：5px；边框半径：5px；}
$（文档）.ready（函数（）{
变量d1_1=[
[1325376000000, 120],
[1328054400000, 70],
[1330560000000, 100],
[1333238400000, 60],
[1335830400000, 35]
];
变量d1_2=[
[1325376000000, 80],
[1328054400000, 60],
[1330560000000, 30],
[1333238400000, 35],
[1335830400000, 30]
];
变量d1_3=[
[1325376000000, 80],
[1328054400000, 40],
[1330560000000, 30],
[1333238400000, 20],
[1335830400000, 10]
];
变量d1_4=[
[1325376000000, 15],
[1328054400000, 10],
[1330560000000, 15],
[1333238400000, 20],
[1335830400000, 15]
];
变量数据1=[
{
标签：“产品1”，
数据：d1_1，
酒吧：{
秀：没错，
条宽：12*24*60*60*300，
填充：是的，
线宽：1，
订单：1，
填充颜色：“AA4643”
},
颜色：“AA4643”
},
{
标签：“产品2”，
数据：d1_2，
酒吧：{
秀：没错，
条宽：12*24*60*60*300，
填充：是的，
线宽：1，
订单：2，
填充颜色：“89A54E”
},
颜色：“89A54E”
},
{
标签：“产品3”，
数据：d1_3，
酒吧：{
秀：没错，
条宽：12*24*60*60*300，
填充：是的，
线宽：1，
订单：3，
填充颜色：“4572A7”
},
颜色：“4572A7”
},
{
标签：“产品4”，
数据：d1_4，
酒吧：{
秀：没错，
条宽：12*24*60*60*300，
填充：是的，
线宽：1，
订单：4，
填充颜色：“80699B”
},
颜色：“80699B”
}
];
$.plot（$（“#占位符”），数据1{
xaxis：{
min:（新日期（2011年11月15日））.getTime（），
max:（新日期（2012年4月18日））.getTime（），
模式：“时间”，
时间格式：“%b”，
tickSize:[1，“月”]，
月份：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
tickLength:0，//隐藏网格线
axisLabel:'月份'，
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
Axislabelfont家族：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
axisLabelPadding:5
},
亚克斯：{
axisLabel:'值'，
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
Axislabelfont家族：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
axisLabelPadding:5
},
网格：{
悬停：是的，
可点击：false，
边框宽度：1
},
图例：{
labelBoxBorderColor:“无”，
位置：“右”
},
系列：{
阴影大小：1
}
});
函数显示工具提示（x、y、内容、z）{
$（''+内容+''）.css({
上图：y-20，
左:x-90,，
“边框颜色”：z，
}).appendTo（“body”）.show（）；
}
函数getMonthName（newTimestamp）{
var d=新日期（新时间戳）；
var numerimonth=d.getMonth（）；
var monthArray=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var alphaMonth=蒙塔雷[数字月]；
每月返回一次；
}
$（“#占位符”）.bind（“plothover”，函数（事件、位置、项目）{
如果（项目）{
if（上一个点！=item.datapoint）{
previousPoint=item.datapoint；
$（“#flot工具提示”）.remove（）；
变异原点；
if（item.datapoint[0]==item.series.data[0][3]）{
originalPoint=item.series.data[0][0]；
}else if（item.datapoint[0]==item.series.data[1][3]）{
originalPoint=item.series.data[1][0]；
}else if（item.datapoint[0]==item.series.data[2][3]）{
originalPoint=item.series.data[2][0]；
}else if（item.datapoint[0]==item.series.data[3][3]）{
originalPoint=item.series.data[3][0]；
}else if（item.datapoint[0]==item.series.data[4][3]）{
originalPoint=item.series.data[4][0]；
}
var x=getMonthName（原始点）；
y=项目数据点[1]；
z=item.series.color；
显示工具提示（item.pageX、item.pageY、，
“+item.series.label+”
“+x+”=“+y+”°；C”，
z） )；
}
}否则{
$（“#flot工具提示”）.remove（）；
previousPoint=null；
}
});
});
平均最高温度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flot Bar Chart</title>
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h1 { width: 450px; margin: 0 auto; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative; margin: 0 auto; }
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
#flot-tooltip { font-size: 12px; font-family: Verdana, Arial, sans-serif; position: absolute; display: none; border: 2px solid; padding: 2px; background- color: #FFF; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"> </script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.orderBars.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var d1_1 = [
[1325376000000, 120],
[1328054400000, 70],
[1330560000000, 100],
[1333238400000, 60],
[1335830400000, 35]
];
var d1_2 = [
[1325376000000, 80],
[1328054400000, 60],
[1330560000000, 30],
[1333238400000, 35],
[1335830400000, 30]
];
var d1_3 = [
[1325376000000, 80],
[1328054400000, 40],
[1330560000000, 30],
[1333238400000, 20],
[1335830400000, 10]
];
var d1_4 = [
[1325376000000, 15],
[1328054400000, 10],
[1330560000000, 15],
[1333238400000, 20],
[1335830400000, 15]
];
var data1 = [
{
label: "Product 1",
data: d1_1,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#AA4643"
},
color: "#AA4643"
},
{
label: "Product 2",
data: d1_2,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 2,
fillColor: "#89A54E"
},
color: "#89A54E"
},
{
label: "Product 3",
data: d1_3,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 3,
fillColor: "#4572A7"
},
color: "#4572A7"
},
{
label: "Product 4",
data: d1_4,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 4,
fillColor: "#80699B"
},
color: "#80699B"
}
];
$.plot($("#placeholder"), data1, {
xaxis: {
min: (new Date(2011, 11, 15)).getTime(),
max: (new Date(2012, 04, 18)).getTime(),
mode: "time",
timeformat: "%b",
tickSize: [1, "month"],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0, // hide gridlines
axisLabel: 'Month',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
yaxis: {
axisLabel: 'Value',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {
shadowSize: 1
}
});
function showTooltip(x, y, contents, z) {
$('<div id="flot-tooltip">' + contents + '</div>').css({
top: y - 20,
left: x - 90,
'border-color': z,
}).appendTo("body").show();
}
function getMonthName(newTimestamp) {
var d = new Date(newTimestamp);
var numericMonth = d.getMonth();
var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var alphaMonth = monthArray[numericMonth];
return alphaMonth;
}
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#flot-tooltip").remove();
var originalPoint;
if (item.datapoint[0] == item.series.data[0][3]) {
originalPoint = item.series.data[0][0];
} else if (item.datapoint[0] == item.series.data[1][3]){
originalPoint = item.series.data[1][0];
} else if (item.datapoint[0] == item.series.data[2][3]){
originalPoint = item.series.data[2][0];
} else if (item.datapoint[0] == item.series.data[3][3]){
originalPoint = item.series.data[3][0];
} else if (item.datapoint[0] == item.series.data[4][3]){
originalPoint = item.series.data[4][0];
}
var x = getMonthName(originalPoint);
y = item.datapoint[1];
z = item.series.color;
showTooltip(item.pageX, item.pageY,
"<b>" + item.series.label + "</b><br /> " + x + " = " + y + "°C",
z);
}
} else {
$("#flot-tooltip").remove();
previousPoint = null;
}
});
});
</script>
</head>
<body>
<h1>Average Maximum Temperatures</h1>
<div id="placeholder"></div>
</body>
</html>