使用react-d3-basic创建带月份的条形图

时间:2016-08-31 20:46:13

标签: javascript d3.js reactjs react-d3

我在创建一个在xScale上显示月份的条形图时遇到问题, 和yTicks的美元。我想显示几个月的销售量。

所以我需要解决的问题是:

a-将xScale设置为月份字符串 - 'jan,feb etc ....'

b-将y设置为以数百或数千为增量使用美元。

这是我的代码:

import React from 'react';
import ReactDOM from 'react-dom';
import {BarChart} from 'react-d3-basic';
import {Chart} from 'react-d3-core';

const Report = React.createClass({
    render(){
        let data = [{month:'january', orders:2214},
                {month:'2', orders:3214},
                {month:'3', orders:5214}];

        let width = 900,
    height = 400,
    title = "Bar Chart",
    chartSeries = [
      {
        field: 'month',
        name: 'Month'
      }
    ],
    x = function(d) {
      return d.month;
    },
    xScale = 'ordinal',
    xLabel = "Month",
    yLabel = "Orders",
    yTicks = [10,'$'];


    return <div> 
        <BarChart
        title= {title}
      data= {data}
      width= {width}
      height= {height}
      chartSeries = {chartSeries}
      x= {x}
      xLabel= {xLabel}
      xScale= {xScale}
      yTicks= {yTicks}
      yLabel = {yLabel}
      />
        </div> 
    }
})

正如您在我的代码中所看到的,如果我在xScale中使用月份字符串,我的订单就无法读取。

现在,我有一个非常难看的图形看起来像这样...... enter image description here

0 个答案:

没有答案