我有我的數據和選項做出反應,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
直接配置仍然不顯示。
@shubnam是你能夠改變,比如'Chart.defaults.global.defaultFontSize = 16的東西;'。這些也不適用於我 – 2016-11-22 09:46:32