Chartist Timeseries固定轴时间标签

Question

我正在尝试创建一个相当简单的时间序列图表，用于在X时间为Y金额付款。 X轴标签每12小时固定一次，如下所示：

new Date("2018-08-28 00:00"),
new Date("2018-08-28 12:00"),
new Date("2018-08-29 00:00"), 
new Date("2018-08-29 12:00")
.............................

当我硬编码数量/时间数组时，我得到了不错的图形但没有X轴标签：https://jsfiddle.net/tolyan/69z2wepo/281812/。当我尝试使用一些真实数据并将其映射到数组时，会生成标签而不是我的固定标签：https://jsfiddle.net/tolyan/69z2wepo/281806/。此外，如何配置chartist以使图形开始具有一些填充或间隙 - 以提高可读性。提前感谢任何提示！

Answer 1

我认为您对真实数据的映射没有任何问题，我认为更多的是了解您的数据并在x轴上放置正确的“滴答”，例如在您的数据中，您有以秒为单位的标记，例如：

  {amount: 22, timestamp: "2018-08-29T06:01:54.007"},
  {amount: 1, timestamp: "2018-08-29T06:01:55.29"},
  {amount: 11, timestamp: "2018-08-29T06:01:56.66"},
  {amount: 9, timestamp: "2018-08-29T06:01:58.063"},

所以当然如果你打算从28日00:00到31日23:59设置你的标记，那么它将无法工作，它将不会显示标签，因为图形需要创建该空间为了显示刻度，这就是它在开头和结尾显示点的原因。因此，在小提琴中调整您的示例，尝试将较低的值放入您的刻度中，如下所示：

axisX: {
        type: Chartist.FixedScaleAxis,
        divisor: 4,
        ticks: [          
          new Date("2018-08-29 06:01:52"),
          new Date("2018-08-29 06:01:53"),
          new Date("2018-08-29 06:01:55"),
          new Date("2018-08-29 06:01:59")
        ],

所以完整的例子应该是这样的：

var trans = [
	{amount: 22, timestamp: "2018-08-29T06:01:54.007"},
  {amount: 1, timestamp: "2018-08-29T06:01:55.29"},
  {amount: 11, timestamp: "2018-08-29T06:01:56.66"},
  {amount: 9, timestamp: "2018-08-29T06:01:58.063"},
  {amount: 6, timestamp: "2018-08-29T06:02:02.203"},
  {amount: 1, timestamp: "2018-08-29 06:02:03.413"}
];
var data = {
  series: [
        {
          name: 'series-times',            
         data: trans.map((prop, key) => {
            return {
              x: new Date(prop["timestamp"]),
              y: prop["amount"]
            };
          })
        }
      ]
};

var options = {
  lineSmooth: Chartist.Interpolation.cardinal({
    tension: 0
  }),
  axisY: {
    type: Chartist.FixedScaleAxis,
    divisor: 8,
    ticks: [0, 10, 20, 30, 40, 50, 60],
    labelInterpolationFnc: function(value) {
      return "$" + value;
    }
  },
  axisX: {
    type: Chartist.FixedScaleAxis,
    divisor: 4,
    ticks: [          
      new Date("2018-08-29 06:01:52"),
      new Date("2018-08-29 06:01:53"),
      new Date("2018-08-29 06:01:55"),
      new Date("2018-08-29 06:01:59")
    ],
    labelInterpolationFnc: function(value) {
      return moment(value).format('MM/DD/YY HH:mm:ss');
    }
  },
  // low: 0,
  // high: 100,
  showPoint: true,
  height: "300px",
  animation: {
    draw: function(data) {
      if (data.type === "line" || data.type === "area") {
        data.element.animate({
          d: {
            begin: 600,
            dur: 700,
            from: data.path
            .clone()
            .scale(1, 0)
            .translate(0, data.chartRect.height())
            .stringify(),
            to: data.path.clone().stringify(),
            easing: Chartist.Svg.Easing.easeOutQuint
          }
        });
      } else if (data.type === "point") {
        data.element.animate({
          opacity: {
            begin: (data.index + 1) * delays,
            dur: durations,
            from: 0,
            to: 1,
            easing: "ease"
          }
        });
      }
    }
  }
}
/* var options = {
  seriesBarDistance: 100
}; */

new Chartist.Line('.ct-chart', data, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet"/>
<div class="ct-chart ct-square"></div>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

要更改标签的填充，只需使用CSS定位它们，您可以检查它们是哪个标签类并根据您的需要进行调整。或者另一个更清洁的解决方案是更改刻度线或标签的JavaScript选项，更多信息：https://gionkunz.github.io/chartist-js/api-documentation.html

希望它有所帮助，如果您有疑问，请告诉我。狮子座。