react-chartjs-2時間スケールの日付が書式設定されていない

Question

私は反応の中でchart.jsの速度を上げています。フォーマットに日付を付けることに問題があります。ここに私のコードはあります：

var data = { 
    labels: labelArray, 
    title: { 
     text: "Date Time Formatting" 
    }, 
    datasets: [{ 
     label: 'Temperature', 
     data: dataArray, 
     tension: 0, 
     borderColor: "rgb(248,169,113)", 
     backgroundColor: "rgba(0,0,0,0)", 
     radius: 0, 
     borderWidth: 1, 
     pointHitRadius: 5 
    }] 
}; 
var options = { 
    title: "This is a test", 
    xAxes: { 
     title: "time", 
     gridThickness: 2, 
     unit: "day", 
     unitStepSize: 1000, 
     type: 'time', 
     time: { 
      displayFormats: { 
       millisecond: 'MMM DD', 
       second: 'MMM DD', 
       minute: 'MMM DD', 
       hour: 'MMM DD', 
       day: 'MMM DD', 
       week: 'MMM DD', 
       month: 'MMM DD', 
       quarter: 'MMM DD', 
       year: 'MMM DD', 
      } 
     } 
    } 
} 
class LineExample extends(Component) { 
    componentWillMount() { 
     let json = getJSONObject(); 
    } 
    render() { 
     // console.log ("Labels: " + labelArray); 
     return (<div> 
      <h2>Line Example</h2> 
      <Line data={data} options={options}/> 
     </div>); 
    } 
}; 
class LineExample extends(Component) { 
    componentWillMount() { 
     let json = getJSONObject(); 
    } 
    render() { 
     // console.log ("Labels: " + labelArray); 
     return (<div> 
      <h2>Line Example</h2> 
      <Line data={data} options={options}/> 
     </div>); 
    } 
}; 

オプションが正しく動作していないようですが（それはちょうど推測です）。

ここでは出力があり、x軸の日付は完全な日付の時間文字列です。ここでピクチャである：

Answer 1

反応-chartjs-2（https://github.com/gor181/react-chartjs-2/blob/master/src/index.js）のrenderChart方法によれば、オプションは、インスタンスを作成するために直接チャートに渡されPROP。 chartjにオプションを渡すと、スケール関連のオプションをキースケールの下に入れ、次に時間とグリッドラインのキーの下に入れなければなりません。このように

var options = { 
     title: {text: "This is a test"}, 
     scales: { 
      xAxes: [{ 
       title: "time", 
       type: 'time', 
       gridLines: { 
        lineWidth: 2 
       }, 
       time: { 
        unit: "day", 
        unitStepSize: 1000, 
        displayFormats: { 
         millisecond: 'MMM DD', 
         second: 'MMM DD', 
         minute: 'MMM DD', 
         hour: 'MMM DD', 
         day: 'MMM DD', 
         week: 'MMM DD', 
         month: 'MMM DD', 
         quarter: 'MMM DD', 
         year: 'MMM DD', 
        } 
       } 
      }] 
     } 
    } 

「日」を単位として使用する場合は、unitStepSizeを調整する必要があります。