在图表中制作自定义轴
making custom axes in flotgraph
我已阅读 API,但我不确定如何处理数据才能获得有意义的轴值。
这是我数据的一小部分样本:
$scope.data = [
{ "plate": "CAR", "date": "2016-10-21" },
{ "plate": "CAS", "date": "2016-10-23", "tags": [ "unreliable" ] },
{ "plate": "CAT", "date": "2016-10-24" },
{ "plate": "CAU", "date": null, "tags": [ "unused" ] },
{ "plate": "CAV", "date": "2016-11-05" },
{ "plate": "CAW", "date": "2016-11-10" },
{ "plate": "CAX", "date": "2016-11-10" }
];
我希望 X 轴标有盘子,Y 轴标有日期。
这是一个有效的 jsfiddle:
https://jsfiddle.net/u4p8vcc0/12/
按照这个例子:http://www.jqueryflottutorial.com/tester-9.html 我已经在选项中添加了 'mode: time',但这只是将范围默认为 0-1000。
我仍然不确定如何将我的数据转换为报价。
(是的,请原谅 angular 与 jQuery 一起使用。flot.js 需要 jQuery,所以... )
您可以通过为 x-axis 使用 categories
模式和为 y-axis 使用 time
模式并使用所需的填充您的 enhancedData
数组来做到这一点数据格式。替换
enhancedData.push([idx, item.daysElapsed]);
和
enhancedData.push([item.plate, item.dateObj.valueOf()]);
完整示例请参阅 this fiddle。
我已阅读 API,但我不确定如何处理数据才能获得有意义的轴值。
这是我数据的一小部分样本:
$scope.data = [
{ "plate": "CAR", "date": "2016-10-21" },
{ "plate": "CAS", "date": "2016-10-23", "tags": [ "unreliable" ] },
{ "plate": "CAT", "date": "2016-10-24" },
{ "plate": "CAU", "date": null, "tags": [ "unused" ] },
{ "plate": "CAV", "date": "2016-11-05" },
{ "plate": "CAW", "date": "2016-11-10" },
{ "plate": "CAX", "date": "2016-11-10" }
];
我希望 X 轴标有盘子,Y 轴标有日期。
这是一个有效的 jsfiddle: https://jsfiddle.net/u4p8vcc0/12/
按照这个例子:http://www.jqueryflottutorial.com/tester-9.html 我已经在选项中添加了 'mode: time',但这只是将范围默认为 0-1000。
我仍然不确定如何将我的数据转换为报价。
(是的,请原谅 angular 与 jQuery 一起使用。flot.js 需要 jQuery,所以... )
您可以通过为 x-axis 使用 categories
模式和为 y-axis 使用 time
模式并使用所需的填充您的 enhancedData
数组来做到这一点数据格式。替换
enhancedData.push([idx, item.daysElapsed]);
和
enhancedData.push([item.plate, item.dateObj.valueOf()]);
完整示例请参阅 this fiddle。