Временные ряды чартистов Фиксированные временные метки оси

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

Так что, конечно, если вы хотите, чтобы ваши тики были установлены с 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

Надеюсь, это поможет, дайте мне знать, если у вас есть вопросы. Лео.