Chartist 时间序列固定轴时间标签

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")
.............................

当我对 amount/time 的数组进行硬编码时，我得到了不错的图形，但没有 X 轴标签：https://jsfiddle.net/tolyan/69z2wepo/281812/. When I try to use some real data and map it to array, labels are generated instead of my fixed labels: https://jsfiddle.net/tolyan/69z2wepo/281806/。此外，我如何配置 chartist 以在图形开始时有一些填充或间隙 - 以提高可读性。提前感谢您的任何提示！

Answer 1

我认为你对真实数据的映射没有任何问题，我认为更多的是了解你的数据并将正确的 "ticks" 放在 x 轴上，例如在你的数据中你有 stamps秒数，例如：

  {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 的刻度，那么它不会起作用，也不会显示标签因为图形需要在中间创建 space 才能显示刻度，这就是为什么它在开头和结尾显示点。因此，请调整 fiddle 中的示例，尝试为您的刻度设置较低的值，如下所示：

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，您只需检查它们是哪个标签 class 并根据您的需要进行调整。或者另一个更清洁的解决方案是更改刻度的 JavaScript 选项或标签，更多信息在： https://gionkunz.github.io/chartist-js/api-documentation.html

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

Chartist 时间序列固定轴时间标签

Chartist Timeseries Fixed Axis Time Labels

charts

reactjs

chartist.js