reactjs 图表实现
reactjs charts implementation
我正在尝试在我的 React 应用程序 中实现一个折线图。我在搜索图表时发现了这个。
https://github.com/reactjs/react-chartjs
我用过这段代码,但不清楚如何使用 chartData
和 chartOptions
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
}
});
如何声明 chartData
和 chartOptions
才能让我的折线图正常工作?
您需要将 chartData
和 chartOptions
定义为 React 组件中的对象。示例 chartData
看起来像
折线图
var chartOptions: {
// 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 Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
}
var chartData = {
labels: [['Sunday', 'Monday'], ['Sunday', 'Tuesday']],
datasets: [
{
color: "#4D5360",
highlight: "#616774",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
label: 'Current lag',
fill: false,
lineTension: 0.1,
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30,
data: [[5, 8], [3, 11]]
}
]
}
对于条形图
var chartData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
var chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
有关对象属性的详细信息,请参阅 docs here:
我正在尝试在我的 React 应用程序 中实现一个折线图。我在搜索图表时发现了这个。
https://github.com/reactjs/react-chartjs
我用过这段代码,但不清楚如何使用 chartData
和 chartOptions
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
}
});
如何声明 chartData
和 chartOptions
才能让我的折线图正常工作?
您需要将 chartData
和 chartOptions
定义为 React 组件中的对象。示例 chartData
看起来像
折线图
var chartOptions: {
// 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 Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
}
var chartData = {
labels: [['Sunday', 'Monday'], ['Sunday', 'Tuesday']],
datasets: [
{
color: "#4D5360",
highlight: "#616774",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
label: 'Current lag',
fill: false,
lineTension: 0.1,
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30,
data: [[5, 8], [3, 11]]
}
]
}
对于条形图
var chartData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
var chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
有关对象属性的详细信息,请参阅 docs here: