标签: flot
具有相等距离x轴的flot条形图
我在报告中使用flot.我可以将我的数据写入flot,但我对它的格式感到困惑.
例如,我的flot代码如下所示:
var views = [
[3747, 7],
[3119, 2],
[3442, 2],
[3748, 1],
[3754, 1],
[2645, 1],
[3534, 1],
[3120, 1],
[2836, 1],
[3571, 1]
];
var ticks = [
3747,
3119,
3442,
3748,
3754,
2645,
3534,
3120,
2836,
3571
];
var options = {
series: {
bars: {
show: true
}
},
grid: {
hoverable:true,
clickable:true,
tickColor:"#dddddd",
borderWidth:0
},
bars: {
align: "center",
barWidth: 0.5
},
xaxis: {
ticks: ticks
},
colors:["#FA5833"]
};
var data = [{data: views, …3
推荐指数
推荐指数
1
解决办法
解决办法
1848
查看次数
查看次数
flot饼图与长标签呈现问题
我用长标签绘制了一个flot pie聊天,它显得丑陋,我认为可以显示远离饼图或饼图下面的标签.我正在使用的javascript是
function onSuccess(series) {
var tickLabels = [];
var pieData= [];
for (var i =0;i<series.length;i++){
tickLabels.push([i,series[i][0]]);
var obj = {};
obj['label']=series[i][0];
obj['data']=series[i][1];
pieData.push(obj);
series[i][0] = i;
}
var data = [series];
var pieArea = $("#pieChart");
pieArea.css("height", "400px");
pieArea.css("width", "600px");
$.plot( $("#barChart"), data, {
series: {
bars: {
show:true,
barWidth: 0.5,
align: "center"
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
xaxis: {
labelWidth:12,
labelAngle: 45,
ticks: tickLabels
}
} );
图表
有没有人知道任何解决方案
3
推荐指数
推荐指数
1
解决办法
解决办法
1851
查看次数
查看次数
修改JSON数据格式以与FLOT图表一起使用
我正在尝试创建一个JSON对象来保存数据以用于FLOT图表.文档说数据格式应该是这样的点数组:
[ [1, 3], [2, 14.01], [3.5, 3.14] ]
我遇到的问题是我的AJAX调用返回一个带有数据格式的JSON对象,如下所示:
Rate: [96, 74, 73, 96, 124, 104]
Year: [2008, 2009, 2010, 2011, 2012, 2013]
有人可以解释我应该如何修改此代码,以便它创建FLOT图表所需的正确数据格式？谢谢.
function ajaxmuniChart1c(){
$muni = $this->input->POST('muni');
$q = $this->db->query("SELECT SaleYear AS Y, NewSaleType AS T, count(*) AS C, format((sum(SalePrice) / sum(Quantity1)),0) AS R FROM tblsales WHERE tblsales.SaleYear > 2007 AND tblsales.Quantity1 > 2000 AND (tblsales.NewSaleType = 'Industrial') AND tblsales.Municipality = '".$muni."' GROUP BY T,Y ORDER BY T,Y");
$json_SaleYear = array();
$json_AvrgRate = array();
foreach …3
推荐指数
推荐指数
1
解决办法
解决办法
4863
查看次数
查看次数
Flot xaxis 刻度未显示
好的，我有一个浮点堆积条形图显示一些信息，现在除了 xaxis 之外，这一切都完美无缺。
目前，我希望它显示的不是显示数据，而是每隔一列显示一个列号。
下面是我的 xaxis 代码：
var options = {
series: {stack: 0,
lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.5, align: 'center',},},
xaxis: {ticks: [[1,' Yesterday'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five'], [6,'Six'], [7,'Seven'], [8,'Eight'], [9,'Nine'], [10,'Ten'], [11,'Eleven'], [12,'Twelve'], [13,'Thirteen'], [14,'fourteen']]},
xaxis: { tickColor: 'transparent' }
};
$.plot($(css_id), data, options);
});
这是配置部分：
xaxis: {
show: true, // null = auto-detect, true = always, false = never
position: "bottom", // or "top"
mode: null, // null or "time" …3
推荐指数
推荐指数
1
解决办法
解决办法
6878
查看次数
查看次数
如何使用flot的类别插件绘制一个类别中的并排(多个系列)条形图？
我使用flot.js和flot的类别插件来创建使用类别而不是x轴刻度的数值的条形图.
当我只使用一个系列时,它的工作非常出色:http://jsfiddle.net/tFy46/1/.
但是,当我使用多个系列时,结果会叠加在一起而不是并排放置.
我的代码:
var graphCanvas = $('#graph-canvas'),
graphData = [
{
"color": "#f00",
"data": [
["1st Nov to 3rd Nov", 5.304752, 4.04044192]
]
},
{
"color": "#0f0",
"data": [
["1st Nov to 3rd Nov", 8.80990656, 3.86548928],
["11th Nov to 15th Nov", 37.89327872, -2.1734158399999997]
]
}
],
graphOptions = {
legend: {
show: false
},
series: {
bars: {
align: 'center',
fill: 0.7,
show: true
}
},
xaxis: {
mode: 'categories'
}
};
$.plot(graphCanvas, graphData, graphOptions); …3
推荐指数
推荐指数
1
解决办法
解决办法
4919
查看次数
查看次数
Flot Chart - 根据数据不同的线和点颜色
我有dis/likes的折线图.正值应为深绿色边框,红色值为深红色边框.此外,红点应填充红色,而不是绿色.
这是它的样子!
它应该是这样的
几个小时后,我无法得到任何解决方案,所以欢迎任何帮助.这是我的代码:
$.plot("#curvePlaceholder", [{
data: data,
color: "#83ce16",
threshold: {
below: 0,
color: "#c00000"
},
lines: {
fill: true,
lineWidth: 3,
fillColor: {
colors: [{ opacity: 1 }, { opacity: 1 } ]
}
}
}],
{
series: {
lines: {
show: true,
fill: true
},
points: {
show: true,
fillColor: '#83ce16'
}
},
grid: {
hoverable: true,
clickable: true,
backgroundColor: 'transparent',
color: 'transparent',
show: true,
markings: [
{ yaxis: { from: 0, to: 0 }, color: "#737374"} …3
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
使用Flot Javascript绘图库重叠数据行
我必须绘制多行,并希望在鼠标悬停时在数据点上绘制工具提示.但是,有些人可能共享相同的(x,y).这导致重叠点.它们被绘制在彼此之上.
似乎"plothover"事件只返回最后绘制的最顶层的数据.因此,工具提示仅适用于该点.我希望在多个数据点悬停时绘制多个工具提示.
有没有人遇到过这个问题？
谢谢!
3
推荐指数
推荐指数
1
解决办法
解决办法
1471
查看次数
查看次数
如何获得Flot Chart的当前条宽？
我正在使用Flot Chart作为我的条形图......我正在使用顶部的图表值指示器...
var p1 = $.plot($("#received-against-assigned"), data1, {
xaxis: {
ticks : ticks,
axisLabel: "Accounts",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 10
},
yaxis: {
axisLabel: "Emails",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
legend: {
// labelBoxBorderColor: "none",
// position: "left"
show: true,
noColumns: 5,
container: "#bar-legend-2"
},
series: {
shadowSize: 1
},
tooltip: true
});
这是指标的代码......
$.each(p1.getData()[0].data, function(i, …3
推荐指数
推荐指数
1
解决办法
解决办法
1106
查看次数
查看次数
jQuery flot 饼图标签格式
我正在尝试格式化我的查询浮图饼图标签和图例。
这是我迄今为止创建的内容：
这就是我正在尝试创建的（我使用 photoshop 完成的）：
如您所见，我正在努力在饼图中包含百分比和值（看到百分比是粗体而值不是），并垂直居中对齐图例。
这是代码：
(function () {
var data = [
{ label: "Sales & Marketing", data: 9545, color: "#62A83B"},
{ label: "Research & Development", data: 16410, color: "#2897CB"},
{ label: "General & Administration", data: 4670, color: "#DEAB34"}
];
$(document).ready(function () {
$.plot($("#expenses-chart"), data, {
series: {
pie: {
show: true
}
},
legend: {
show: true,
labelFormatter: function(label, series) {
var percent= Math.round(series.percent);
var number= series.data[0][1]; //kinda weird, but this is what it takes
return(' <b>'+label+'</b>: '+ percent …3
推荐指数
推荐指数
1
解决办法
解决办法
8822
查看次数
查看次数