Как работать с Highcharts в AngularJS

Question

Я новичок в Highcharts и придерживаюсь логики, которую мне нужно реализовать.

Мой chartSettings выглядит примерно так:

self.chartSettings = {
    chart: {
      zoomType: 'x',
      spacingBottom: 30,
      spacingTop: 10,
      height: 200
    },
    title: {
      text: null,
      align: 'left',
      margin: 0
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    xAxis: {
      type:'category',
      tickInterval:1,
      crosshair: true,
      labels: {
        rotation: 0
      }
    },
    yAxis: {
    min:0,
    title: {
        text: null
    }
    },
    plotOptions: {
      series: {
          marker: {
              enabled: false
          }
      },
      column: {
        stacking: 'normal'
      }
    },
    tooltip:{
    shared: true
    }
};

Я использую xAxis type category.

Теперь у меня есть данные за 10 дней от 2018/04/30 до 2018/05/09, но, поскольку 30th April падает в апреле вместе с именами дат в xAxis, я хочу показать прерыватель строки названия месяца

что-то вроде:

Мои данные для примера выглядят так:

    "value": [
        {
        "Year": 2018,
        "TimePeriodInYear": 20180430,
        "AnalysisData":2300,
        "StartDate": 20180430,
        "EndDate": 20180430
        },
        {
        "Year": 2018,
        "TimePeriodInYear": 20180501,
        "AnalysisData":2705,
        "StartDate": 20180501,
        "EndDate": 20180501
        },
        ....
        ....

Я вычитаю date из TimePeriodInYear и показываю в виде точек данных xAxis. Но как мне получить название месяца?

Answer 1

Хотя вы можете использовать категории для отображения времени и даты в старших чартах, есть лучший способ.Используйте ось даты и времени и убедитесь, что вы даете время в миллисекундах для своих значений.

Заимствование из этого ответа по Parth Thakkar , вы можете использовать следующую функциюдля разбора ггггммдд в число миллисекунд:

function parse(number) {
    let str = number.toString()
    let y = str.substr(0,4),
    m = str.substr(4,2) - 1,
    d = str.substr(6,2);
    return new Date(y,m,d).getTime();
}

и установите тип datetime:

xAxis: {
  type: 'datetime', 
  tickInterval: 3600*24*1000, //tickinterval = 24 hours
  ...
}

Затем вы можете использовать xAxis.dateTimeLabelFormats, чтобы выбрать, какчтобы отобразить ваши даты.

В дополнение к этому я установил для useUTC значение false, чтобы сохранить местный часовой пояс на графике:

time: {
  useUTC: false  //Using local user timezone (instead of UTC)
}

Рабочий пример : https://jsfiddle.net/ewolden/4vava584/4/