Как заставить тики / линии сетки на оси X даты и времени Highcharts произвольно совпасть с точками данных?

Question

Я работаю над графиком хай-чартов, используя рубиновый камень lazy_high_charts. Ось X представляет последовательную дату с метками на каждой третьей. Тем не менее, я, кажется, не могу контролировать, под какими датами появляются метки, и, кроме того, нет контроля над тем, где появляются линии сетки. Независимо от того, с какой даты начинается или заканчивается график, кажется, что он «привязан» к назначению тиков на определенные даты, и я не могу найти способ изменить его.

У этого есть еще один раздражающий побочный эффект, так как я использую startOnTick и endOnTick со значением true: иногда линии ряда данных появляются на одном уровне с левой стороной графика (и в этом случае выровняйте линии сетки / метки / метки ), а иногда они начинаются справа от крайнего левого значения.

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

(РЕДАКТИРОВАТЬ: я не могу опубликовать скриншоты ниже, к сожалению, потому что я новый пользователь ... если мне удастся получить 10 очков репутации, я буду загружать их) Вот скриншоты, показывающие два диапазона дат, которые иллюстрируют оба сценария:

Как вы можете видеть, в обоих случаях метки / метки / линии сетки попадают на одни и те же даты, даже если временные диапазоны разные. (РЕДАКТИРОВАТЬ: см. Выше)

Ниже приведены параметры графика, которые я использую. Извините, что они в синтаксисе ruby, но они прямо переведены на javascript. Помимо этой проблемы, график отображается точно так, как я хочу, поэтому я не хочу вносить какие-либо изменения, которые могут поставить под угрозу любую часть внешнего вида. Спасибо!

f.options[:title] = nil

  f.options[:legend] = { :enabled => false }

  f.options[:chart] = {
    :defaultSeriesType => "line",
    :height => 342,
    :width => 760,
    :opacity => 0.0,
    :style => "{ width: 760px; height: 342px; }",
    :borderColor => '#000000',
    :plotBorderColor => '#000000',
    :labels => "{ color: '#000000'; }",
    :spacingLeft => 25,
    :spacingRight => 25,
  }

  f.options[:xAxis] = {
    :type => 'linear',
    :gridLineWidth => 1,
    :gridLineDashStyle => 'ShortDash',
    :startOnTick => true,
    :endOnTick => true,
    :showLastLabel => true,
    :tickInterval => 3.days * 1000,
    :tickLength => 10,
    :tickWidth => 1,
    :tickPosition => 'inside',
    :tickmarkPlacement => 'on',
    :minorGridLineWidth => 0,
    :minorGridLineDashStyle => 'Dot',
    :minorTickInterval => 1.day * 1000,
    :minorTickLength => 5,
    :minorTickWidth => 1,
    :offset => 15,
    :minorTickPosition => 'inside',
    :lineWidth => 0,
    :labels => { :align => 'center', :step => 1 },
    :min => "2012-01-09".to_datetime.to_i * 1000,
    :max => "2012-01-09".to_datetime.to_i * 1000 + 29.days * 1000,
  }

  f.options[:yAxis] = {
    :title => { :text => nil },
    :type => 'linear',
    :gridLineWidth => 0,
    :min => 0,
    :max => 100,
    :labels => { :enabled => false }
  }
  f.series(:name=>'SeriesA', :data=>[29.9, 71.5, 54.4, 98, 2, 14.0, 23.6, 65.5, 34.4, 88.1], :color => "#D846AD", :pointStart => "2012-01-09".to_datetime.to_i * 1000, :pointInterval => 3.days * 1000)
  f.series(:name=>'SeriesB', :data=> [40.9, 71.5, 32.4, 12.2, 12.0, 32.0, 43.6, 34.5, 56.4, 87.1], :color => "#0A96C9", :pointStart => "2012-01-09".to_datetime.to_i * 1000, :pointInterval => 3.days * 1000)

Answer 1

Трудно сказать, является ли это именно той проблемой, с которой вы столкнулись, не видя скриншотов, но если ваша проблема в том, что я думаю, вот решение:

Попробуйте установить minPadding и maxPadding в 0 для соответствующей оси вместе с startOnTick: true и endOnTick: true. Предположительно, поведение startOnTick и endOnTick переопределяется, если вы также не установите заполнение.

Answer 2

Я думаю, что ваша проблема в автоматической настройке меток даты и времени.Старшие диаграммы возьмут дату точки и установят метку оси в соответствии со своей собственной логикой.

Например, если ваша ось охватывает несколько лет, она может отображать август 2012 или даже только год.Итак, что вы видите, назначая дату 01.Aug 2012 для оси в реальности. Highcharts отображает представление даты, которое оно находит подходящим для масштаба оси.

Вы можете управлять этим поведением, установив DateTimeLabelFormat для своего xAxis:

dateTimeLabelFormats: Object Для оси дата-время масштаб автоматически подстраивается под соответствующую единицу.Этот член дает строковые представления по умолчанию, используемые для каждого модуля.Для обзора кодов замены см. DateFormat.По умолчанию:

см. HighCharts Reference

Так что все, что вам нужно сделать, это изменить это:

{
    second: '%H:%M:%S',
    minute: '%H:%M',
    hour: '%H:%M',
    day: '%e. %b',
    week: '%e. %b',
    month: '%b \'%y',
    year: '%Y'
}

на что-то вроде

{
    second: '%H:%M:%S',
    minute: '%H:%M',
    hour: '%H:%M',
    day: '%e. %b',
    week: '%e. %b',
    month: '%e. %b',
    year: '%e. %b %Y'
}

, чтобы отобразить:

% e: день месяца, от 1 до 31. и% b: короткий месяц, например, «январь».

Так, например, он будет отображать 23. Янв для вашей точки для шкалы осей дня или выше и 23. Янв 2012 для шкалы более года.

Другой метод будет принудительнографик для отображения ваших значений.Я не думаю, что это целесообразно на линейном графике дата-время, но вот пример: JSFiddle

А вот вопрос StackOverflow с чуть большей детализацией