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/。另外，如何配置图表绘制工具以使其在图形开始处具有一些填充或间隙-以获得更好的可读性。预先感谢您提供任何提示！

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"},

因此，当然，如果您要设置从00:00的28号到23:59的31号的价格变动，那么它将无效，并且由于图表需要创建，因此不会显示标签中间有空格显示刻度线，这就是为什么它在开头和结尾显示点的原因。因此，调整小提琴中的示例，尝试将较低的值添加到刻度上，如下所示：

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

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

图表专家时间序列固定轴时间标签

1 个答案: