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被傳遞到直接圖表來創建實例。將選項傳遞給chartjs時，與比例相關的選項需要嵌套在關鍵尺度下，然後分別在time和gridLines鍵下進行嵌套。像這樣

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', 
        } 
       } 
      }] 
     } 
    } 

如果您打算使用'day'作爲單位，您可能需要調整unitStepSize。