2016-11-08 57 views
1

我有我的數據和選項做出反應,chartjs配置爲陣營-chartjs選項不生效

var lagData = [{ 
    options: { 
     // Boolean - If we should show the scale at all 


    showScale: true, 
    // Boolean - Whether to show a dot for each point 
    pointDot: true, 
    showLines: false, 
    title: { 
     display: true, 
     text: 'Chart.js Line Chart' 
    }, 
    legend: { 
     display: true, 
     labels: { 
      boxWidth: 50, 
      fontSize: 10, 
      fontColor: '#bbb', 
      padding: 5, 

     } 
    } 
}, 
    data: { 
     labels: ['1', '2', '3', '4'], 
     datasets: [ 
      { 
       label: 'Current lag', 
       fill: false, 
       lineTension: 0.1, 
       backgroundColor: "rgba(75,192,192,0.4)", 
       borderColor: "rgba(75,192,192,1)", 
       borderCapStyle: 'butt', 
       borderDashOffset: 0.0, 
       borderJoinStyle: 'miter', 
       pointBorderColor: "rgba(75,192,192,1)", 
       pointBackgroundColor: "#fff", 
       pointBorderWidth: 1, 
       pointHoverRadius: 5, 
       pointHoverBackgroundColor: "rgba(75,192,192,1)", 
       pointHoverBorderColor: "rgba(220,220,220,1)", 
       pointHoverBorderWidth: 2, 
       pointRadius: 1, 
       pointHitRadius: 10, 
       spanGaps: false, 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30, 
       data: [50, 35, 60, 67] 
      } 
     ] 
    } 
}] 

圖表我uing它在我的代碼爲

<Line data={lagData[0].data} options={lagData[0].options} width="600" height="300" /> 

這是怎麼了我已經導入庫

import {Line, Bar} from 'react-chartjs'; 
import Chart from 'chartjs'; 

令人驚訝的是數據被繪製到圖表上,但選項根本不影響圖表。我無法弄清楚這個問題。我格式錯了,還是錯過了一些非常愚蠢的東西。

任何幫助表示讚賞。

UPDATE

改變import Chart from 'chart.js';import Chart from 'chartjs';後,有些人喜歡showScale, pointDot, showLines和一些選項呈現的數據集,但title and legends直接配置仍然不顯示。

+0

@shubnam是你能夠改變,比如'Chart.defaults.global.defaultFontSize = 16的東西;'。這些也不適用於我 – 2016-11-22 09:46:32

回答