2016-11-25 4 views
1

Ich habe diesen Code mit react-chartjs. Es zeigt die Grafik an, aber die Optionen werden jedes Mal ignoriert, egal was ich dort hinlege. Gibt es eine andere Möglichkeit, die Optionen in die Komponente hinzuzufügen?React-chartjs Optionen ignorieren

import React, { PropTypes } from 'react' 
var LineChart = require("react-chartjs").Line; 

var data = { 
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
    datasets: [{ 
    label: 'apples', 
    data: [12, 19, 3, 17, 6, 3, 7] 
    }] 
}; 

var options = { 
    lineTension : 0, 
    fill : false, 
    showLines : false 
}; 

const Graph =() => (
    <span> 
    <h1>Heart Graph</h1> 
    <LineChart data={data} options={options} width="600" height="250"/> 
    </span> 
) 

export default Graph 
+0

Laut http://www.chartjs.org/docs/#line-chart-dataset-structure 'fill' ist ein Attribut in einem Dataset, aber das hat auch nicht für mich funktioniert. – kev

Antwort

1

Sie verwenden eine „Datensatzstruktur“, so überprüfen Sie die Dokumentation zu den Optionen für Line Chart Datasets aus.

Sie schlagen vor, dass Sie die "Optionen" zusammen mit Ihrem Datenobjekt senden sollten - in diesem Fall an die Komponenten data prop.

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      data: ['data1', 'data2'], 
      fill: false, 
      lineTension: 0.1, 
      ... 

Alternativ können Sie der Option prop ein komplexeres Optionsobjekt mit Achseneinstellungen zur Verfügung stellen.

options: { 
    scales: { 
     xAxes: [{ 
      type: 'linear', 
      position: 'bottom' 
     }] 
    } 
} 
Verwandte Themen