在图表中制作自定义轴

Question

我已阅读 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，所以... )

Answer 1

您可以通过为 x-axis 使用 categories 模式和为 y-axis 使用 time 模式并使用所需的填充您的 enhancedData 数组来做到这一点数据格式。替换

enhancedData.push([idx, item.daysElapsed]);

和

enhancedData.push([item.plate, item.dateObj.valueOf()]);

完整示例请参阅 this fiddle。

在图表中制作自定义轴

making custom axes in flotgraph

jquery

flot

axes