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

希望对您有所帮助，如果您有任何问题，请告诉我。 狮子座。