3

我正在使用 react-chartjs，现在我遇到了一个问题，即我的图表没有在我的控制台中完全没有错误地呈现。

以前，当我安装 react-chartjs 和 chartjs 时，总是出现错误Unmet peer dependency: eslint-plugin-jsx-a11y@3.0.2。虽然我不确定这是否相关。

这是我的演示组件：

import React, { PropTypes } from 'react';
import Chart from 'chart.js';
import { Line as LineChart } from 'react-chartjs';

const StatsGraph = (props) =>
  <div>
    <LineChart data={props.helpsPosted} redraw width="600" height="250" />
  </div>;

StatsGraph.propTypes = {
  helpsPosted: PropTypes.object.isRequired,
};

export default StatsGraph;

这是我的helpsPosted道具：

const helpsPosted = {
  chartData: {
    labels: [
      "January", 
      "February", 
      "March", 
      "April", 
      "May", 
      "June", 
      "July", 
      "August", 
      "September", 
      "October",
      "November",
      "December",
    ],
    datasets: [
      {
        label: "Helps posted",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        borderCapStyle: 'butt',
        borderDash: [],
        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,
        data: [65, 59, 80, 81, 56, 55, 40, 40, 0, 21, 10, 0],
        spanGaps: false,
      },
    ],
  },
};

任何帮助，将不胜感激。谢谢！

4

0 回答 0