I use a d3 bar chart with react.js I use a code from http://www.reactd3.org/docs/basic/ Graph appears with wrong and have some errors. Code is here
我使用d3条形图进行反应。js我使用的代码来自http://www.t3.org/docs/basic/graph,出现错误,并有一些错误。代码在这里
import React from 'react';
import ReactDOM from 'react-dom';
import {Chart} from 'react-d3-core';
import {BarChart} from 'react-d3-basic';
class StatusChannelChart extends React.Component{
render() {
var generalChartData = [
{"A": "0.08167"},
{"B": "0.01492"},
{"C": "0.02782"},
{"D": "0.04253"},
{"E": "0.12702"},
{"F": "0.02288"},
{"G": "0.02015"},
{"H": "0.06094"},
{"I": "0.06966"},
{"J": "0.00153"}
];
console.log(generalChartData);
var width = 700,
height = 400,
title = "Bar Chart",
chartSeries = [
{
field: 'frequency',
name: 'Frequency'
}
],
x = function(d) {
return d.letter;
},
xScale = 'ordinal',
xLabel = "Letter",
yLabel = "Frequency",
yTicks = [10, "%"];
return (
<BarChart
title= {title}
data= {generalChartData}
width= {400}
height= {300}
chartSeries = {chartSeries}
x= {x}
xLabel= {xLabel}
xScale= {xScale}
yTicks= {yTicks}
yLabel = {yLabel}
/>
)
}
}
export default StatusChannelChart;
Grape appears but wrong like this
葡萄似乎是错的。
I got some error like this
我有这样的错误。
My package.json
我package.json
{
"name": "Dashboard",
"version": "0.1.4",
"description": "Reporting Dashboard",
"author": "Victoria",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors"
},
"devDependencies": {
"babel-core": "~6.7.*",
"babel-loader": "~6.2.*",
"babel-preset-es2015": "~6.6.*",
"babel-preset-react": "~6.5.*",
"css-loader": "^0.23.1",
"react-sidenav": "^1.0.4",
"style-loader": "^0.13.1",
"webpack": "~1.12.*",
"webpack-dev-server": "~1.14.*"
},
"dependencies": {
"chart.js": "^1.1.1",
"dsv-loader": "^1.1.0",
"json-loader": "^0.5.4",
"react": "^15.3.1",
"react-bootstrap": "^0.30.3",
"react-chartjs": "^0.8.0",
"react-d3-basic": "^1.6.11",
"react-dom": "^15.3.1",
"react-router": "^2.7.0"
}
}
1 个解决方案
#1
1
Change your generalChartData
from this:
更改您的generalChartData:
var generalChartData = [
{"A": "0.08167"},
{"B": "0.01492"},
{"C": "0.02782"},
{"D": "0.04253"},
{"E": "0.12702"},
{"F": "0.02288"},
{"G": "0.02015"},
{"H": "0.06094"},
{"I": "0.06966"},
{"J": "0.00153"}
];
To this:
:
var generalChartData = [
{letter: "A", frequency: 0.08167},
{letter: "B", frequency: 0.01492},
{letter: "C", frequency: 0.02782},
...
{letter: "J", frequency: 0.00153}
];
#1
1
Change your generalChartData
from this:
更改您的generalChartData:
var generalChartData = [
{"A": "0.08167"},
{"B": "0.01492"},
{"C": "0.02782"},
{"D": "0.04253"},
{"E": "0.12702"},
{"F": "0.02288"},
{"G": "0.02015"},
{"H": "0.06094"},
{"I": "0.06966"},
{"J": "0.00153"}
];
To this:
:
var generalChartData = [
{letter: "A", frequency: 0.08167},
{letter: "B", frequency: 0.01492},
{letter: "C", frequency: 0.02782},
...
{letter: "J", frequency: 0.00153}
];