标签: react-chartjs

当我运行服务器..这个组件被加载...没有在服务器端发现错误...但浏览器控制台给出了以下错误:

未捕获的TypeError :(中间值)[chartType]不是函数

我的代码如下:

var React = require('react');
var ReactDOM = require('react-dom');
var chart = require('chart.js');
var DoughnutChart = require("react-chartjs").Doughnut;
var Tempvshum = React.createClass({
  render() {
    var chartOptions = {
    segmentShowStroke : true
  };
var chartData = [{
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
  }];
   return(<DoughnutChart data={chartData} options={chartOptions} />);
   }
  });
module.exports = Tempvshum;

如何在ChartJs(最新版本)中显示数据值或索引标签,如下图所示:

我正在使用ChartJs在我的React项目中显示图表.一切都很好,除了这个.

我在stackoverflow(/sf/answers/2214289521/)中找到了答案,但是它使用的是旧版本的chartjs,而不是我正在使用的那个.

我的ChartJs代码:

var ctx = document.getElementById("myChart");

var BarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Jan","Feb","March"],
        datasets: [{
            label: "Chart Data",
            data: [10,20,15],
            backgroundColor: "red",
            borderColor: "green",
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    maxRotation: 180
                }
            }]
        }
    }
});

我尝试使用函数添加它:ctx.fillText(bar.value, bar.x, bar.y - 5);,但它的显示.fillText is not a function

React Charts 2 https://github.com/gor181/react-chartjs-2

在下面引用

图表JS http://www.chartjs.org/docs/#getting-started

react-chartjs-2中的文档引用了chart.js文档，但它们都是错误的。我无法弄清楚如何在响应中配置图表，尤其是选项。有人知道吗

这就是我设置数据的方式：

    const data = {
        labels: ['February', 'March'],
        datasets: [
            {
                label: 'My First dataset',
                backgroundColor: 'rgba(255,99,132,0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
                data: [5, 9]
            }
        ]
    };

但是第一个元素设置轴的起点：

但我希望它从零开始

添加以下内容无济于事：

options: {
  scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

我找不到其他设置可以在文档上执行此操作。

我正在使用这个顺便说一句：https : //www.npmjs.com/package/react-chartjs-2

我对react-chartjs-2中的条形图有疑问.我在我的应用程序中使用react-chartjs-2制作了条形图和饼图.

我可以使用插件调用Chart.PieceLabel.js 来显示饼图的值.但我找不到条形图的插件.我想显示每个条形图的值与饼图相同.

条形图中的每个条形值是否可能？

目前的观点是这样的.在饼图中,将显示每个切片的值.

这是我的代码

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  this.update();
  }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
    }

update() {
  var piData;
  this.setState({
    piData : piData
  })
}    

  componentDidMount() {
    let ctx = this.refs.chart.chart_instance.chart.ctx;
    console.log(this.refs.chart.chart_instance.chart.ctx); // returns a Chart.js instance reference
    this.refs.chart.chart_instance.chart.config.data.datasets.forEach(function (dataset) {
                if(dataset.type === …

我已经使用以下文档的帮助实现了一个反应图表

http://www.chartjs.org/docs/latest/charts/line.html

我已经成功地实现了它，但是这个文档没有展示如何为 y 轴设置最大值。我想将最大 y 轴设置为 100。但是因为我的数据集没有超过 19 的任何值，所以最大 y 轴设置为 20。

即使我的数据不超过 19，我如何将最大 y 轴值设置为 100。？

我的代码

class LineCharts extends Component {

    constructor() {
        super();

    }

    render() {

        var chartData = {

            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            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: true,
                    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: …

我有一个带有子图表组件的主要组件。连接到Websocket时，主要组件将更新子图表组件的状态。但是，这不会重绘。但是，当我单击图表时，将显示标签，而当我再次单击时，值将与标签一起显示。

Main.js：

import IO from 'socket.io-client';
import React from "react";

import { Switch, Route } from 'react-router-dom';
import { Chart } from "./Chart";

let ftse100Tickers = require('./ftse_100_tickers.json');
let randomInt = Math.floor(Math.random() * ftse100Tickers.tickers.length);

/**
 * Main application component which contains
 */
export class Main extends React.Component {
    componentWillMount() {
        this.socket = IO(location.protocol + "//" + document.domain + ":" + location.port);
        this.socket.on("connect", (() => this.connect()));
        this.socket.on("disconnect", (() => this.disconnect()));
        this.socket.on("initial data", ((data) => this.createInitialChart(data)))
    }

    connect(){
        this.setState({status: 'connected'});
        this.socket.emit("get initial data", …

当我使用 Y 坐标的数值和 x 坐标的日期值传递我的数据点时，散点图从 1976 年开始 x 轴，即使我最早的日期是 2018 年。如何设置 x 轴的起始值？这是我的数据和选项的样子。日期格式：2018/06/30

data: {
    datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: 10,
            y: ‘2018/06/30’
        }, {
            x: 0,
            y: ‘2018/06/01’
        }, {
            x: 100,
            y: ‘2018/06/04’
        }]
    }]
}
options: {
    scales: {
        xAxes: [{
            type: 'time',
                     ticks: {
                     suggestedMin: ‘2018/01/01’,
            }
        }]
    }
}

我尝试将 new Date('2018/01/01') 传递给SuggestedMin，我也尝试使用Min而不是suggestMin。

我正在使用一个名为 reactChartJs2 的库，并且有一个使图表可下载的建议，有没有办法将图表转换为 PDF 或任何其他格式？

我在任何地方都找不到解决方案，这让我发疯。我有一个使用react-chartjs-2包的折线图。这就是我的代码的样子：

const CHARTDATA = {
    labels: dates,
    datasets: [
      {
        backgroundColor: dates[0]! > dates[dates.length - 1]! ? "red" : "green",
        borderColor: dates[0]! > dates[dates.length - 1]! ? "red" : "green",
        data: prices,
      },
    ],
  };

  const CHARTOPTIONS = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
        
      },
     
    },
  };

  return <Line data={CHARTDATA} options={CHARTOPTIONS} />;

所有这些工作正常，但我不知道如何自定义轴（y 和 x）。我要做的就是删除两个轴标题，这样左侧（y 轴）或底部（x 轴）就没有文本。我猜它在CHARTOPTIONS中的某个地方，但不太确定。我在网上发现了很多相互矛盾的答案，老实说，我认为这个包的文档很糟糕。有谁知道如何自定义轴？

我正在尝试使用 我安装的模块react-chartjs-2来实现这个图表：

npm install --save react-chartjs-2 chart.js

所以我在package.json 中有这个：

  "chart.js": "^2.9.4",
  "react-chartjs-2": "^2.11.1"

我从github复制了图表代码：

import React from 'react'
import { Line } from '@reactchartjs/react-chart.js'

const data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: false,
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgba(255, 99, 132, 0.2)',
    },
  ],
}

const options = {
  scales: {
    yAxes: [
      { …