Ошибка при рендеринге Highstock date

Question

Ну, я пытаюсь создать диаграмму высот ... Но когда я пытаюсь отобразить диаграмму, значение даты неверно! Вы можете видеть, мое первое свидание было 2012-11-7 (yyyy-MM-dd) ... и моя последняя дата была 2012-12-7. Но когда карта была оказана диапазон дат был между 2012-12-7 2013-01-7 ... И я действительно не знаю, почему ...

$(function() { 
     Highcharts.setOptions({ 
      credits: { 
       enabled: false 
      }, 
      //0000fe 
      colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'], 
      lang: { 
       loading: 'Aguarde...', 
       months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'], 
       weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'], 
       shortMonths: ['Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], 
       exportButtonTitle: "Exportar", 
       printButtonTitle: "Imprimir", 
       rangeSelectorFrom: "De", 
       rangeSelectorTo: "Até", 
       rangeSelectorZoom: "Período", 
       downloadPNG: 'Download imagem PNG', 
       downloadJPEG: 'Download imagem JPEG', 
       downloadPDF: 'Download documento PDF', 
       downloadSVG: 'Download imagem SVG' 
      } , global: { 
      useUTC: true 
      } 
     }); 
     // Create the chart 
     $('#container').highcharts('StockChart', { 

      rangeSelector: { 

       enabled: false 
      }, 

      navigator: { 
       enabled: false 
      }, 
      title: { 
       text: '' 
      }, 
      legend: { 
       enabled: true, 
       align: 'center', 
       backgroundColor: '#FCFFC5', 
       borderColor: 'black', 
       borderWidth: 1, 
       layout: 'vertical', 
       verticalAlign: 'top', 
       y: 0, 
       shadow: true 
      }, 
      yAxis: { 
       title: { 
        text: 'Valores' 
       }, 
       max: 5.86, 
       min: 4.83, 
       showEmpty: true, 
       plotLines: [{ 
        value: 5.86, // val_superior 
        color: 'green', 
        dashStyle: 'shortdash', 
        width: 2, 
        label: { 
         text: 'Limite superior' 
        }, 
        zIndex: 99 
       }, { 
        value: 4.83, // val_inferior 
        color: 'red', 
        dashStyle: 'shortdash', 
        width: 2, 
        label: { 
         text: 'Limite inferior' 
        }, 
        zIndex: 99 
       }] 
      }, 
      series: [{name: 'Água Bruta - pH', data: [ [Date.UTC(2012,11,7,9,20,0),5.19],[Date.UTC(2012,11,7,10,20),5.17],[Date.UTC(2012,11,7,11,20),5.07],[Date.UTC(2012,11,7,13,20),5.19],[Date.UTC(2012,11,7,14,20),5.29],[Date.UTC(2012,11,7,17,20),5.19],[Date.UTC(2012,11,8,8,30),5.45],[Date.UTC(2012,11,8,9,30),5.34],[Date.UTC(2012,11,8,10,30),5.19],[Date.UTC(2012,11,8,13,0),5.09],[Date.UTC(2012,11,8,14,30),5.14],[Date.UTC(2012,11,8,16,0),5.10],[Date.UTC(2012,11,9,8,30),5.22],[Date.UTC(2012,11,9,9,30),5.18],[Date.UTC(2012,11,9,10,30),5.22],[Date.UTC(2012,11,9,11,30),5.29],[Date.UTC(2012,11,9,13,20),5.11],[Date.UTC(2012,11,9,14,20),5.06],[Date.UTC(2012,11,9,16,20),5.15],[Date.UTC(2012,11,10,8,30),5.55],[Date.UTC(2012,11,10,9,30),5.34],[Date.UTC(2012,11,10,10,30),5.54],[Date.UTC(2012,11,10,11,30),5.49],[Date.UTC(2012,11,12,8,30),5.34],[Date.UTC(2012,11,12,9,30),5.35],[Date.UTC(2012,11,12,10,30),5.10],[Date.UTC(2012,11,12,11,30),5.09],[Date.UTC(2012,11,12,13,20),5.47],[Date.UTC(2012,11,12,14,20),5.41],[Date.UTC(2012,11,12,15,30),5.38],[Date.UTC(2012,11,12,16,30),5.42],[Date.UTC(2012,11,13,8,50),5.09],[Date.UTC(2012,11,13,14,20),5.11],[Date.UTC(2012,11,13,15,20),5.21],[Date.UTC(2012,11,13,16,20),5.19],[Date.UTC(2012,11,14,8,30),5.38],[Date.UTC(2012,11,14,9,30),5.14],[Date.UTC(2012,11,14,12,20),5.12],[Date.UTC(2012,11,14,15,45),5.09],[Date.UTC(2012,11,14,17,30),5.11],[Date.UTC(2012,11,16,9,30),5.16],[Date.UTC(2012,11,16,10,50),5.10],[Date.UTC(2012,11,16,12,40),5.12],[Date.UTC(2012,11,16,14,20),5.09],[Date.UTC(2012,11,16,15,20),5.21],[Date.UTC(2012,11,16,16,30),5.03],[Date.UTC(2012,11,17,8,30),4.88],[Date.UTC(2012,11,17,9,30),4.99],[Date.UTC(2012,11,17,10,30),5.01],[Date.UTC(2012,11,17,11,30),5.01],[Date.UTC(2012,11,19,8,50),5.50],[Date.UTC(2012,11,19,9,50),5.01],[Date.UTC(2012,11,19,10,50),4.98],[Date.UTC(2012,11,19,11,50),5.02],[Date.UTC(2012,11,19,13,30),5.10],[Date.UTC(2012,11,19,14,30),5.03],[Date.UTC(2012,11,19,16,30),5.62],[Date.UTC(2012,11,20,8,20),5.59],[Date.UTC(2012,11,20,8,30),5.31],[Date.UTC(2012,11,20,10,0),5.57],[Date.UTC(2012,11,20,14,30),5.20],[Date.UTC(2012,11,20,15,30),5.18],[Date.UTC(2012,11,20,16,30),5.21],[Date.UTC(2012,11,21,8,20),5.57],[Date.UTC(2012,11,21,11,0),5.42],[Date.UTC(2012,11,21,11,50),4.98],[Date.UTC(2012,11,21,13,20),5.01],[Date.UTC(2012,11,21,16,20),5.21],[Date.UTC(2012,11,22,9,30),5.44],[Date.UTC(2012,11,22,10,40),5.11],[Date.UTC(2012,11,22,11,40),5.09],[Date.UTC(2012,11,22,13,30),5.21],[Date.UTC(2012,11,22,15,40),5.31],[Date.UTC(2012,11,22,16,40),5.29],[Date.UTC(2012,11,23,8,30),5.32],[Date.UTC(2012,11,23,9,50),5.41],[Date.UTC(2012,11,23,10,40),5.86],[Date.UTC(2012,11,23,11,40),5.66],[Date.UTC(2012,11,23,13,10),5.56],[Date.UTC(2012,11,23,16,10),5.38],[Date.UTC(2012,11,24,8,30),5.10],[Date.UTC(2012,11,24,9,30),5.19],[Date.UTC(2012,11,24,10,30),5.20],[Date.UTC(2012,11,26,10,30),5.24],[Date.UTC(2012,11,26,11,30),5.14],[Date.UTC(2012,11,26,11,30),5.31],[Date.UTC(2012,11,26,13,20),5.36],[Date.UTC(2012,11,26,14,30),5.19],[Date.UTC(2012,11,26,15,30),5.30],[Date.UTC(2012,11,26,16,30),5.10],[Date.UTC(2012,11,27,8,30),5.00],[Date.UTC(2012,11,27,9,30),5.17],[Date.UTC(2012,11,27,10,30),5.18],[Date.UTC(2012,11,27,11,30),5.12],[Date.UTC(2012,11,27,13,20),5.21],[Date.UTC(2012,11,27,14,20),5.12],[Date.UTC(2012,11,27,15,30),5.19],[Date.UTC(2012,11,27,16,30),5.22],[Date.UTC(2012,11,28,8,40),5.12],[Date.UTC(2012,11,28,9,40),5.32],[Date.UTC(2012,11,28,10,40),5.28],[Date.UTC(2012,11,28,11,40),5.55],[Date.UTC(2012,11,28,13,20),5.34],[Date.UTC(2012,11,28,17,0),5.73],[Date.UTC(2012,11,29,8,30),4.83],[Date.UTC(2012,11,29,9,30),5.13],[Date.UTC(2012,11,29,10,40),5.10],[Date.UTC(2012,11,29,11,40),5.12],[Date.UTC(2012,11,29,13,40),4.99],[Date.UTC(2012,11,29,14,30),5.10],[Date.UTC(2012,11,30,8,40),4.83],[Date.UTC(2012,11,30,9,40),5.01],[Date.UTC(2012,11,30,10,40),4.91],[Date.UTC(2012,11,30,11,40),5.10],[Date.UTC(2012,11,30,13,20),5.11],[Date.UTC(2012,11,30,16,20),4.99],[Date.UTC(2012,12,1,8,30),5.49],[Date.UTC(2012,12,1,9,30),5.10],[Date.UTC(2012,12,1,10,30),5.01],[Date.UTC(2012,12,1,11,30),5.05],[Date.UTC(2012,12,3,8,30),5.19],[Date.UTC(2012,12,3,9,30),5.66],[Date.UTC(2012,12,3,11,30),5.59],[Date.UTC(2012,12,3,13,30),5.40],[Date.UTC(2012,12,3,14,30),5.38],[Date.UTC(2012,12,3,15,30),5.20],[Date.UTC(2012,12,3,16,30),5.18],[Date.UTC(2012,12,4,10,0),5.19],[Date.UTC(2012,12,4,15,0),5.40],[Date.UTC(2012,12,4,17,0),5.33],[Date.UTC(2012,12,5,8,30),5.30],[Date.UTC(2012,12,5,9,30),5.25],[Date.UTC(2012,12,5,10,30),5.10],[Date.UTC(2012,12,5,11,30),5.09],[Date.UTC(2012,12,5,13,30),5.01],[Date.UTC(2012,12,6,8,30),5.19],[Date.UTC(2012,12,6,9,6),5.19],[Date.UTC(2012,12,6,9,30),5.25],[Date.UTC(2012,12,6,10,1),5.25],[Date.UTC(2012,12,6,10,30),5.01],[Date.UTC(2012,12,6,10,56),5.01],[Date.UTC(2012,12,6,11,30),5.05],[Date.UTC(2012,12,6,11,48),5.05],[Date.UTC(2012,12,7,8,30),5.09],[Date.UTC(2012,12,7,8,57),5.09],[Date.UTC(2012,12,7,9,30),5.11],[Date.UTC(2012,12,7,9,55),5.11],[Date.UTC(2012,12,7,10,30),5.15],[Date.UTC(2012,12,7,10,43),5.15],[Date.UTC(2012,12,7,11,30),5.21],[Date.UTC(2012,12,7,11,52),5.21],[Date.UTC(2012,12,7,13,30),5.33],[Date.UTC(2012,12,7,14,30),5.20],[Date.UTC(2012,12,7,15,6),5.20],[Date.UTC(2012,12,7,15,30),5.21],[Date.UTC(2012,12,7,15,56),5.21],[Date.UTC(2012,12,7,16,30),5.19],], type: 'spline', tooltip: { valueDecimals: 2}},] 

     }); 

    }); 

Вот живой Exemple: http://jsfiddle.net/5fp70oev/1/

Answer 1

Это распространенная ошибка при работе с датами в javascript. Мы так привыкли видеть месяцы как цифры (например, январь === 1, июль === 7, декабрь === 12), что трудно переключиться на систему с нулевым индексом с месяцами (например, январь === 0 , Июль === 6, декабрь === 11). Попробуйте вставить это в консоли вы браузера:

(new Date()).getMonth(); 

В этом месяце является январь, консоль должна распечатать 0, который является первым в месяц системе с нуля.

Ваша система использует массивы с индексами 0-11, Jan-ДЕЗ, так что вы должны получить доступ к ним с помощью shortMonths[0] для Jan, shortMonths[10] для Nov, shortMonths[11] для Dez и т.д ...

Есть несколько вещи, которые вы можете сделать. Можно было бы вычесть одно из значения месяца каждой отдельной даты в data. Вероятно, вы должны были это сделать в первую очередь.

Кроме того, грязнее, хотя гораздо быстрее исправить, Вы можете просто вставить пустой элемент ('') в начале массивов, чтобы компенсировать показатели за январь-Dez на 1:

shortMonths: ['', 'Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'] 

JSFiddle Here. Ура!