ChartJS/MomentJS - 비추천 경고를 제거 할 수 없습니다. 그래프가 파이어 폭스/오페라

Question

에 표시되지 않으므로 브라우저가 momentJS를 잘못 사용하는 것에 대한 경고로

경고를 표시합니다.

Deprecation warning: value provided is not in a recognized ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. 
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 12.30, _f: false, _strict: undefined, _locale: [object Object] 
Error 

그래서 난 내 코드

data: { 
    labels: ['01.01', '02.01', '03.01', '04.01', '05.01', '06.01', '07.01', '08.01', '09.01', '10.01', '11.01', '12.01'], 
    datasets: createChatterData(data, this) 
}, 

보았다 그리고 비 이소 문자열을 다룰 때 나는 형식을 제공해야한다는 읽어 보시기 바랍니다.

labels: [moment('01.01', 'MM.DD'), moment('02.01', 'MM.DD'), ...]; 

첫 번째 지원 중단 된 기능이 삭제되었습니다.

하지만 내 데이터 세트 데이터는 날짜의 포함은

dataset.data.pushObject({ 
     x: moment(datum).format('MM.DD'), 
     y: parseInt(moment(datum).format('YYYY')) 
    }); 

그래서 나는 그 (premodified ambigious 날짜)에 대한 다른 유사

x: moment(date, 'YYYY.MM.DD').format('MM.DD') 

및

x: moment(date, 'MM.DD') 

하지만 내 그래프 나던 시도 더 이상 정확하게지도. http://codepen.io/kristjanrein/pen/wJrQLE 이

Answer 1

내가 문제의 몇 여기에서 볼 파이어 폭스/오페라에 표시되지 않습니다 의

예는 크롬에서 작업 차트를 codepen.

1) X 축을 시간 척도로 만들려면 X 데이터 값을 moment 개체로 남겨 두어야합니다. 현재 구현은 날짜 문자열에서 moment 객체를 만든 다음 다시 문자열로 서식을 지정합니다. 이렇게하면 chart.js는 문자열을 가져 와서 차트를 작성할 때 moment 개체를 내부적으로 만들려고합니다.

따라서 데이터를 Date 또는 Moment 개체로 유지하고 시간 눈금 구성 속성을 사용하여 데이터가 차트에 표시되는 방식을 결정하는 것이 가장 좋습니다. 이렇게하면 chart.js가 moment 객체를 생성하고 문자열 형식을 추측하지 않아도됩니다.

2) Chart.Scatter을 사용할 때 차트를 만드는 데 2.0 이전 방법을 사용하고 있습니다. 대신 새 스타일 (new Chart())을 사용하고 type 속성을 전달해야합니다.

다음은 브라우저 경고가 표시되지 않고 Chrome과 Firefox에서 작동하는 코드의 수정 된 버전입니다 (필자는 Opera에서 테스트하지 않았습니다).

var getData = function() { 
    var dummyDataset = [ 
    '2007-11-09T00:00:00.000Z', 
    '2006-08-04T00:00:00.000Z', 
    '2006-08-06T00:00:00.000Z', 
    '2008-01-10T00:00:00.000Z' 
    ]; 

    return dummyDataset.map(function(datum) { 
    var myMoment = moment(datum); 

    return { 
     x: myMoment, 
     y: parseInt(myMoment.format('YYYY')), 
    }; 
    }); 
}; 

var ctx = document.getElementById("chart1").getContext("2d"); 
var myScatter = new Chart(ctx, { 
    type: 'line', 
    data: { 
    datasets: [{ 
     label: "My First dataset", 
     borderColor: 'rgb(255, 99, 132)', 
     fill: false, 
     pointRadius: 4, 
     pointHoverRadius: 8, 
     showLine: false, 
     data: getData() 
    }] 
    }, 
    options: { 
    responsive: true, 
    title: { 
     display: true, 
     text: 'Random Data' 
    }, 
    legend: { 
     display: true, 
     labels: { 
     fontSize: 10, 
     boxWidth: 20 
     } 
    }, 
    elements: { 
     point: { 
     pointStyle: 'rect' 
     } 
    }, 
    hover: { 
     mode: 'nearest' 
    }, 
    scales: { 
     xAxes: [{ 
     type: 'time', 
     position: 'bottom', 
     scaleLabel: { 
      display: true, 
      labelString: 'Months' 
     }, 
     time: { 
      unit: 'month', 
      displayFormats: { 
      month: 'MM' 
      }, 
     } 
     }], 
     yAxes: [ { 
     type: 'linear', 
     ticks: { 
      min: 2005, 
      max: 2015, 
      stepSize: 1 
     }, 
     scaleLabel: { 
      display: true, 
      labelString: 'Year' 
     } 
     }] 
    } 
    } 
}); 

이 동작은 forked codepen에서 볼 수 있습니다.

다른 점은 데이터가 여러 해에 걸쳐 있으므로 X 축에 중복 월이 표시된다는 것입니다. 시간 눈금은 날짜를 플롯 (plot)하는 데 사용되므로 월을 표시하는 경우에도 같은 달이지만 다른 연도의 데이터 포인트는 같은 위치에 플롯되지 않습니다.

실제로 X 축에 월 문자열/숫자 값만 표시하려면 time 배율을 사용하지 말고 linear 배율을 사용하십시오. 그런 다음 데이터 값을 만들면 Y 값에 대해 이미 수행 한 것과 같은 방식으로 데이터에서 월을 추출합니다. 'time' to type: 'linear'

그리고 그것은에 의해뿐만 아니라지도 만들기 :

var getData = function() { 
    var dummyDataset = [ 
    '2007-11-09T00:00:00.000Z', 
    '2006-08-04T00:00:00.000Z', 
    '2006-08-06T00:00:00.000Z', 
    '2008-01-10T00:00:00.000Z' 
    ]; 

    return dummyDataset.map(function(datum) { 
    var myMoment = moment(datum); 

    return { 
     x: parseInt(myMoment.format('MM')), 
     y: parseInt(myMoment.format('YYYY')), 
    }; 
    }); 
}; 

Answer 2

그래서 조던의 대답 이외에 나는 유형에서

['01.01', '02.01', ...] to [1,2,...] 

및

에서 내 레이블과 x 축 변경 달뿐만 아니라 하루. 나는 부유물을 교정하기위한 데이트 대상을 만들어야 만했다. 05.20

const date = datum.key; 
const day = parseInt(moment(date).format('DD'))/30 * 100; 
const fullDate = parseFloat(moment(date).format('MM') + '.' + Math.round(day)) 
// 05.10 would be 5.3 (10 of 30 is 33%) 
{ 
    x: fullDate, 
    y: parseInt(moment(date).format('YYYY')) 
    date: date, // for tooltip 
    count: count // for tooltip 
} 

그리고 5.66에 나는 또한 당신은 이미 내 원래의 대답을 본다면

function getTooltip(tooltipItem, datasets) { 
    return datasets[tooltipItem.datasetIndex].data.find(datum => { 
     return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel; 
    }); 
}