ChartJS/MomentJS - Die Verwarnungswarnung konnte nicht entfernt werden. Grafik zeigt nicht in Firefox/Opera

Question

so Browser werfen

Warnung über die Verwendung von MomentJS falsch.

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 

Also schaute ich auf meinen Code

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) 
}, 

Und lesen Sie, dass ich ein Format zur Verfügung stellen sollten, wenn mit nicht iso-Strings zu tun.

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

Ok, die erste Veraltetheit entfernt.

Aber meine Datensätze Daten enthält auch aktuell

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

So habe ich versucht, verschiedene Varianten zu, dass (vormodifizierter mehrdeutige Datetime)

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

und

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

Aber mein Graph doesnt richtig zuordnen.

Beispiel codepen Diagramm in Chrom arbeiten: http://codepen.io/kristjanrein/pen/wJrQLE Hat in Firefox/Opera nicht anzeigen

Answer 1

ich ein paar Probleme hier zu sehen.

1) Da Ihre X-Achse eine Zeitskala sein soll, sollten Sie Ihren X-Datenwert als moment-Objekt belassen. Ihre aktuelle Implementierung erstellt ein moment-Objekt aus einer Datumszeichenfolge und formatiert es dann wieder in eine Zeichenfolge. Wenn Sie dies tun, nimmt chart.js die Zeichenfolge und versucht intern ein Objekt moment zu erstellen, wenn es das Diagramm erstellt.

Daher ist es am besten, die Daten entweder als Date oder Moment-Objekt zu behalten und die Eigenschaften der Zeitskalierungskonfiguration zu verwenden, um zu bestimmen, wie die Daten auf dem Diagramm angezeigt werden. Dies verhindert, dass chart.js das Objekt moment konstruieren und das Zeichenfolgenformat erraten muss.

2) Sie verwenden den Pre-2.0-Weg, um ein Diagramm zu erstellen, wenn Sie Chart.Scatter verwenden. Stattdessen sollten Sie den neuen Stil() verwenden und eine type Eigenschaft übergeben.

Hier ist eine modifizierte Version von Ihnen Code, der keine Browserwarnungen ergibt und in Chrome und Firefox funktioniert (ich habe nicht in Opera getestet).

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' 
     } 
     }] 
    } 
    } 
}); 

Sie können ihn in Aktion an diesem forked codepen sehen.

Eine andere Sache zu beachten ist, dass, weil Ihre Daten über mehrere Jahre erstreckt, Sie doppelte Monate auf der X-Achse sehen werden. Denken Sie daran, dass eine Zeitskala für die Darstellung von Daten verwendet wird. Selbst wenn Sie nur die Monate anzeigen, wird ein Datenpunkt mit demselben Monat, aber mit unterschiedlichen Jahren, nicht am selben Ort dargestellt.

Wenn Sie nur die Werte für die Monatszeichenfolge/-zahl in der X-Achse anzeigen möchten, sollten Sie die Skala time überhaupt nicht verwenden und stattdessen die Skala linear verwenden. Wenn Sie dann Ihre Datenwerte erstellen, würden Sie den Monat aus den Daten extrahieren (genauso wie Sie es bereits für Ihren Y-Wert tun).

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

So zusätzlich zu Jordans Antwort Ich änderte meine Etiketten und x-Achse von

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

und

vom Typ: 'time' to type: 'linear'

Und es ist nicht nur zu machen Karte von Monat aber auch am Tag. Ich musste Datumsobjekte machen, um Floats zu korrigieren. 05.20 bis 5,66

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 
} 

und ich hatte auch Korrekturen an meine Tooltips

callbacks: { 
    title: function([tooltipItem], data) { 
    const tooltipInfo = getTooltip(tooltipItem, data.datasets); 

    return tooltipInfo.date; 
    }, 

    label: function(tooltipItem, data) { 
    const tooltipInfo = getTooltip(tooltipItem, data.datasets); 

    return i18n.t('chart.count') + ': ' + tooltipInfo.count; 
    }, 
} 

entsprechenden Tooltip-Datensatz

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