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

Question

Я много искал по этой теме.Я нашел один ответ на stackoverflow, но он очень лаконичен и бесполезен для меня (так как я очень плохо знаком с javascript и highcharts).Буду признателен, если кто-то сможет объяснить, как это сделать, изменив мой код ниже.

У меня есть следующий код:

$(document).ready(function() {
   var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'divcontainer',
         height: 500
      },
      xAxis: {
         type: 'datetime',
      },
      credits: {
         enabled: false
      },
      series: [{
         data: [
            [Date.UTC(2007,05,29), 300], // This x-axis value should be labeled.
            [Date.UTC(2007,09,03), 300], // NO LABEL for this value
            [Date.UTC(2007,09,04), 200]  // This x-axis value should be labeled.
         ]         
      }]
   });

})

Этот код дает мне:

С этим связаны две проблемы.

(1) Дата начала 29 июня 2007 года не отображается.Я хочу, чтобы это появилось на графике.(2) Я хочу показать только даты, соответствующие первой и последней точке в серии данных.

Буду очень признателен, если кто-нибудь покажет мне, как делать эти две вещи.

Спасибо.

Answer 1

Относительно вопроса (1) , я полагаю, что вы не можете сделать это в datetime xAxis в HighCharts . При установке этого типа оси каркас вычисляет отметки, отображаемые на соответствующей оси, в зависимости от имеющихся у вас данных.

В ответ на вопрос (2) я считаю, что пока вы не можете пропустить время по оси дата-время. Однако, хотя я и не пробовал, вы можете посмотреть на некоторые обходные пути, используя category , чтобы вы могли использовать форматировщик и заменить ненужные галочки.

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

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container'
},
xAxis: {
    type: 'datetime',
    labels: {
        enabled: false
    }

},

series: [{
    dataLabels: {
        enabled:true,
        formatter: function(){
            if(this.point === this.series.data[this.series.data.length - 1])
            {
                return this.x
            }
            if(this.point === this.series.data[0])
            {
                return this.x
            }
        } 
    },
    data: [
        [Date.UTC(2007,05,29), 300], 
        [Date.UTC(2007,09,23), 300], 
        [Date.UTC(2007,09,04), 400]
    ]
}]

});

По сути, я избавляюсь от меток xAxis и просто показываю дату в самой точке для значений, которые я хочу (первый и последний). Обратите внимание, что вы, возможно, захотите отформатировать отображение этой даты, поскольку сейчас отображается метка времени в мс.

Вы можете увидеть это вживую в jsFiddle: ярлыки xAxis удалены

Answer 2

Вы можете легко сделать это с помощью .isLast и .isFirst, например:

     xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function() {
                        if(this.isLast || this.isFirst)
                            return [whatever label calculation you need];
                        else return null;
                    },
                },
                title: {
                    text: 'Date'
                }
            }

Answer 3

Это возможно. Этот код здесь производит:

Хотя это не красивый код.

Answer 4

Старый вопрос, но теперь есть более чистый способ сделать это с помощью tickPositions.

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
  xAxis: {
     type: 'datetime',
     labels: {
         // When using tickPositions, you'll also need to specify a label format.
         format: '{value:%e. %b}',
     },         
     tickPositions: [Date.UTC(2007,05,29), Date.UTC(2007,09,04)]
  },
  credits: {
     enabled: false
  },
  series: [{
     data: [
        [Date.UTC(2007,05,29), 300], // This x-axis value should be labeled.
        [Date.UTC(2007,09,03), 300], // NO LABEL for this value
        [Date.UTC(2007,09,04), 200]  // This x-axis value should be labeled.
     ]         
  }]
});

JSFiddle demo

ResultingДиаграмма

Answer 5

Вы пытались поместить список значений, разделенных запятыми, в xAxis: {category: [{'5/29/2007', '9/4/2007', '23.09.2008'}]}

и для диаграммы: {series: [{null}, {300}, {400}]}

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