- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作堆积条形图,单击按钮即可重新绘制。
我使用类别插件在 x 轴上显示文本值
但是,当重新绘制条形图时,标签不会按顺序排序。
http://jsfiddle.net/mxvhp9uo/5/
var App = angular.module('App', []);
App.controller('Ctrl', function ($scope) {
var data2 = [{
"label": "Passed",
"color": "#27c24c",
"data": [
["Apr 01 2015", 21],
["Apr 02 2015", 20],
["Apr 06 2015", 23],
["Apr 07 2015", 55]
]
}, {
"label": "Failed",
"color": "#FFA500",
"data": [
["Apr 01 2015", 21],
["Apr 02 2015", 2],
["Apr 06 2015", 10],
["Apr 07 2015", 27]
]
}]
var data1 = [{
"label": "Passed",
"color": "#27c24c",
"data": [
["Apr 06 2015", 23],
["Apr 07 2015", 55],
]
}, {
"label": "Failed",
"color": "#FFA500",
"data": [
["Apr 06 2015", 10],
["Apr 07 2015", 27],
]
}];
var arr1 = {
"passdetails": [{
"test_id": 6,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 06 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 3,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 6,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 07 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 8,
"time_taken": 32767,
"browser_used": "chrome"
}],
"faildetails": [{
"test_id": 3,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 06 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 2,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 3,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 07 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 9,
"time_taken": 32767,
"browser_used": "chrome"
}]
}
var arr2 = {
"passdetails": [{
"test_id": 3,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 01 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 3,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 1,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 02 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 8,
"time_taken": 32767,
"browser_used": "chrome"
}],
"faildetails": [{
"test_id": 4,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 01 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 2,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 10,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 02 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 9,
"time_taken": 32767,
"browser_used": "chrome"
}]
}
$scope.data = data1
$scope.details = []
$scope.plotdate = null
$scope.arr = arr1;
$scope.redraw = function () {
$scope.data = data2
$scope.arr = arr2;
}
});
App.directive('chart', function () {
return {
restrict: 'EA',
link: function (scope, elem, attrs) {
var chart = null,
options = {
series: {
stack: true,
bars: {
show: true,
clickable: true,
barWidth: 0.1
}
},
axisLabels: {
show: true
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
axisLabel: 'Pass/Fail Count',
axisLabelUseCanvas: false,
axisLabelFontSizePixels: 12,
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: true
}
}
var data = scope[attrs.ngModel];
var getKeyByValue = function (obj, value) {
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
if (obj[i] === value) return i;
}
}
}
scope.$watch(attrs.ngModel, function (v) {
if (!chart) {
chart = $.plot(elem, v, options);
elem.show();
} else {
chart.setData(v);
chart.setupGrid();
chart.draw();
}
});
elem.bind("plotclick", function (event, pos, item) {
if (item) {
scope.show = false
console.log('ticks= ', item.series.xaxis.ticks)
console.log('Categories= ', item.series.xaxis.categories)
scope.plotdate = item.series.xaxis.ticks[item.dataIndex].label
scope.stats = item.series.label
switch (scope.stats) {
case 'Passed':
scope.details = scope.arr.passdetails;
break;
case 'Failed':
scope.details = scope.arr.faildetails;
break;
}
}
scope.$apply();
console.log('details= ', scope.details)
console.log('Plotdate= ', scope.plotdate)
console.log('Show= ', scope.show)
});
}
}
});
App.filter('getdata', function () {
return function (items, date) {
var arrayToReturn = [];
for (var i = 0; i < items.length; i++) {
if (items[i].start_date == date) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
});
最佳答案
类别插件中有一行不允许重新创建类别数组。 https://github.com/EseMentie/flot/blob/master/jquery.flot.categories.js 中的第 124 行
if (!series[axis].categories) {-----}
我注释掉了 if 条件,现在每次图表数据发生变化时类别标签都会重新计算:)
参见 fiddle http://jsfiddle.net/mxvhp9uo/8/
关于javascript - flot x 轴刻度标签未与更改数据上的堆栈条形图对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29675475/
你能用 flot 渲染这样的条形图吗? 我是否需要手动创建数据集才能获得此结果,而不是使用 mode: 'time' ? 最佳答案 其实pretty easy使用浮点生产。 var options =
我刚刚将我的 Flot 版本从 0.6 更改为 0.7,但是,当我这样做时,我的 Flot 图中的图例会改变样式。以前,我使用“LabelClass”属性来更改样式,但在阅读 0.7 的源代码时,我发
我在弄清楚如何控制 Flot 上的外边距时遇到了一些困难。图我已经实现。我尝试了很多选择; minBorderMargin,边距,axisMargin,labelMargin。无论是单独设置还是全部设
有谁知道如何根据时间戳显示浮点中的日期 $(function () { var d1 = [ [1262818800,100],[1262732400,100],[1262646000,100],[
我想做的就是标记我的x轴: function doPlot(position) {//Flot $.plot("#placeholder", [//data { data: t
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
首先,对于按照网站规则正确提问而出现的错误,我深表歉意,这是我第一次这样做,我已经尽力了。 所以我有以下问题: 假设我有该数据(考虑它 - 日期/值): 然后我用它初始化一个图表,那一刻唯一相关的选项
所以我正在使用 jquery.flot 和 jquery.flot.selection 并且因为 define({... 异步加载模块我遇到了问题因为选择插件试图将自己插入 $.plot.plugin
我正在使用 FLOT 图表库来绘制随时间消耗的卡路里。我希望 y 轴使用自动缩放(仅显示数据集中 +/- 最小值和最大值的值)。 但是,图表始终使用 0 作为条形图的最小值,而不是自动缩放 y 轴值。
我在同一页面上显示两个或多个流程图,并使用 flot.navigate 插件进行拖动和缩放。我可以独立于其他图表缩放和拖动单个图表,但我希望其他图表与应用导航操作的图表一起移动或缩放。有些页面可能只有
我正在使用 Flot 绘制折线图,我的数据集是一个相当大的 JSON blob 数组,看起来像(为简洁起见被 chop ): [{"load_data": 5047, "url": "ht
在生产环境中运行 Angular 6 时出现此错误。 91%额外的 Assets 处理脚本-webpack-plugin✖「wdm」: Error: ENOENT: no such file or d
我遇到了另一个小的堆叠条问题:填充绘图时,flot 自上而下添加图例条目并将条条自下而上堆叠。这样,图例的顺序与条形图完全相反。 flot API 允许按照标签的添加顺序、字母顺序或提供自定义排序功能
我正在使用 Flot 构建图表,数据收集结束时的空项被忽略。 我的代码如下: var d1 = []; for (var i = 0; i 使用 Flot 0.8.1,这会产生以下结果: JS
我有一个基本的条形图,我在 flot 中展示(5 个条形,显示每个状态的百分比)。 $.plot($("#placeholder"), [ { label: 'Failed',
我正在创建一个需要大量复杂多折线图的网站。我看到两个最适合这份工作的候选人 Flot Google Charts 有没有人对这个决定有任何建议或偏好? 最佳答案 谷歌图表:每次需要绘图时都需要调用谷歌
在以下 fiddle 中: http://jsfiddle.net/jamitzky/9x7aJ/ 如果窗口宽度发生变化,如何使图形的宽度发生变化? 代码: $(function () { var d
我在学生图表 div 中使用 flot 绘制了折线图: $.plot(jQuery("#studentavgchart"), DATA, options); Graph 将在具有 oneTwo 类的
我在我的应用程序中使用 Flot,它运行良好。我想从图表背景中删除垂直线和水平线。我尝试过,但无法实现该功能。 grid: { verticalLines:false, horizon
我有一个图表,其中显示代表 24 小时降雨量的条形图。现在我遇到的第一个问题是 flot 中条形的默认 1px 宽度,请参阅此示例: 我搜索了一个解决方案,发现指定 barwidth 像这样: bar
我是一名优秀的程序员,十分优秀!