标签: react-chartjs

我想使用该包向折线图添加填充react-chartjs-2。我正在传递fill: true数据集，但它没有按预期工作。有什么建议么？

const data = {
    labels,
    datasets: [
      {
        label: "Balance",
        data: history.balances.map((item) => item.balance),
        fill: true,
        borderColor: "rgba(190, 56, 242, 1)",
        backgroundColor: "rgba(190, 56, 242, 1)",
        tension: 0.3,
      },
    ],
  };

我创建了一个圆环图，它可以正常工作，但现在我需要在其中心显示数字 45，例如。

我应该在哪里指定要显示的文本和坐标？在图表的选项中？

我正在使用反应组件

class DoughnutChart extends React.Component {

  render() {
    const data = {
      datasets: [{
      data: [],
      backgroundColor: [
        '#999',
        '#eee'
      ]
    }],
     text: '45'
  };
    return (
       <Doughnut data={data} />
    );
  }
};

export default DoughnutChart;

编辑

我找到了这个插件，但我找不到它如何应用于反应组件

//Plugin for center text
Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
    height = chart.chart.height,
    ctx = chart.chart.ctx;
    ctx.restore();
    var fontSize = (height / 160).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "top";
    var text = "Foo-bar",
    textX …

我正在创建一个仪表板应用程序,它从端点获取数据并使用setState方法将端点返回的JSON中的变量分配给状态变量.当我对状态进行更改时,某些组件(如"react-svg-gauge")将更新但"react-chartjs-2"不会更新.

以下代码是我的状态在我的实际应用中如何变化的示例.此示例将在chrome开发人员控制台中显示状态变量的正确值,但不会相应地更新DOM.

import React, { Component } from 'react';
import {Doughnut} from 'react-chartjs-2';

class DoughnutExample extends Component {
  state = {
    data: {
        labels: [
            'Red',
            'Green',
            'Yellow'
        ],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56'
            ],
            hoverBackgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56'
            ]
        }]
    }
  }

  componentDidMount() {
    this.timer = setInterval(
      () => this.increment(),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  increment() {
    let datacopy = Object.assign({}, this.state.data)
    datacopy.datasets[0].data[0] = datacopy.datasets[0].data[0] + 10
    console.log(datacopy.datasets[0].data[0])
    this.setState({data: datacopy}) …

我有一个折线图,我试图设置固定的最大值和最小值.我已经尝试了在SO上找到的其他建议,但它仍然无效.我的图表会根据传入的数据重新设置最大值和最小值.

这是我传递给折线图的当前选项:

var options = {
        responsive: true,
        animation: false
};

我也尝试过这些设置:

var options = {
    scales: {
        animation: false,
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: -1,
                suggestedMax: 1
            }
        }]
    }
};

知道我做错了什么吗？

谢谢!

我想在甜甜圈饼图中添加一条短信.更具体一点,我想要这样的东西:

我在堆栈溢出中遇到了同样的问题,他们在jquery中使用图表js,因为我是javascript的新手,我感到很困惑.这就是我定义饼图的方式:

<Doughnut
            data={sectorsData}
            width={250}
            height={250}
            options={{
              legend: {
                display: false
              },
              maintainAspectRatio: false,
              responsive: true,
              cutoutPercentage: 60
            }}
          />

我使用Chart.js v2获得以下雷达图表.

我的配置:

legend: false,
scale: {
    pointLabels :{
        fontSize: 16,
        fontStyle: "bold",
    }
}

这里的问题是"通信"标签在标签和数字100之间有0填充.如何配置此填充和/或修复此问题？

我正在尝试创建一个折线图，其中线条（和点）的颜色取决于绘制的值。例如，如果该值高于以下阈值，[0, 115, 125]则颜色将['green', 'yellow', 'red']分别为。

要求与本示例中实现的要求几乎相同：https : //jsfiddle.net/egamegadrive16/zjdwr4fh/

不同之处在于我正在使用react-chart-js-2，因此draw()无法以相同的方式访问该方法。相反，建议创建一个插件来操作图表。

这是目前的插件代码：

import { Chart } from "react-chartjs-2";

class variableLineColorUtils {
  selectColor(value, thresholds, colors) {
    let color = colors[0];
    thresholds.every((limit, index) => {
      if (value < limit) return false;
      else color = colors[index];
      return true;
    });

    return color;
  }
}

const variableLineColor = {
  id: "variableLineColor",
  afterDraw: (chart, easing) => {
    const options = chart.options.variableLineColor;
    if (options) {
      const utils = new variableLineColorUtils(); …

在本地主机上运行“npm start”后，出现以下错误：

./node_modules/chart.js/dist/chart.js 695:18 模块解析失败：意外的标记 (695:18) 文件已使用这些加载器处理：

• ./node_modules/babel-loader/lib/index.js 您可能需要一个额外的加载器来处理这些加载器的结果。| | 类数据集控制器{

静态默认值= {}；| 静态数据集元素类型 = null; | 静态数据元素类型 = null;

我已经更新了 Chart.js 和 React Chartjs 2 的版本。我删除了 node_modules 和 package-lock.json 并重新安装，应用程序未启动。我已经删除了node_modules/package-lock.json/clear npm 缓存。没有帮助。

我调用了update（）函数，但是它不起作用。

TypeError：line.update不是函数。

为什么update（）不是函数？

我在http://jsfiddle.net/zpnx8ppb/26/上看到了此示例，其中的更新功能确实起作用

这是我的代码：

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';

const line = {
    labels: [],
    datasets: [
       {
          label: 'My First dataset',
          fill: false,
          data: []
       }
    ]
};

setInterval(function(){
    line.labels.push(Math.floor(Math.random() * 100));
    line.datasets[0].data.push(Math.floor(Math.random() * 100));
    line.update();
}, 5000);

class LineChart extends Component {
    render() {
        return (
            <div className="chart">
                <Line
                    data={this.state}
                    height={5}
                    width={20}
                />
            </div>          
        )
    }
}

export default LineChart;

我最近使用react-chartjs-2实现了图表显示（https://github.com/jerairrest/react-chartjs-2）

我想启用缩放和平移功能，以便在触摸屏上更加用户友好。为了实现此功能，我安装了react-hammerjs和chartjs-plugin-zoom。

import {Chart, Line} from 'react-chartjs-2';
import Hammer from 'react-hammerjs';
import zoom from 'chartjs-plugin-zoom'

我注册了插件

componentWillMount(){
    Chart.plugins.register(zoom)
}

渲染方法如下：

render(){
    return <Line data={data} options={options} />
}

平移和缩放选项：

pan:{
    enabled=true,
    mode:'x'
},
zoom:{
    enabled:true,
    drag:true,
    mode:'xy'
}

我想这是正确的实施方法。不幸的是，上述实现并没有奏效。如果你们中的一些人已经使用react-chartjs-2插件实现了缩放和平移，我将非常感激，请分享您是如何实现这些功能的。或者你可以指出我上面代码中的问题。