标签: react-chartjs
如何更新react-chartjs-2中的图表？
我调用了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;
推荐指数
解决办法
查看次数
带有日期 xAxes 的散点图 react-chratjs-2
我正在尝试实现一个具有分散日期属性的图形，但图表正在呈现彼此之间具有相同距离的所有日期。
{
"ndvi values": [
0.1158,
0.1975,
0.1913,
0.2137,
0.1603,
0.13,
0.246,
0.249,
0.1955,
0.124,
0.1854,
0.2721,
0.2095,
0.1357,
0.2444
],
"Julian dates": [
2458208.0,
2458386.0,
2458476.0,
2458566.0,
2458653.0,
2458746.0,
2458836.0,
2458921.0,
2459026.0,
2459111.0,
2458391.0,
2458476.0,
2458566.0,
2458746.0,
2458836.0
]
}
这是我从后端api获取的json数据，日期数组是这样的[2018/2/12、2018/218、2018/5/19、2019/1/1]。如您所见，日期以正确且升序的方式排序。有没有办法根据我们拥有的数据使图形步骤更合乎逻辑？
推荐指数
解决办法
查看次数
react-chartjs图表呈现没有颜色
我尝试使用react-chartjs制作雷达图表(https://github.com/reactjs/react-chartjs).它呈现,但没有颜色.
我错过了什么？我几乎在https://reactcommunity.org/react-chartjs/index.html复制了大部分示例.(我将数据简化为一个数据集.)
import React, {PropTypes} from 'react';
import {Grid} from 'react-bootstrap';
const {Radar} = require("react-chartjs");
const ReactDOM = require('react-dom');
function rand(min, max, num) {
var rtn = [];
while (rtn.length < num) {
rtn.push((Math.random() * (max - min)) + min);
}
return rtn;
}
var chartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "red",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: …推荐指数
解决办法
查看次数
使用 react-chartjs-2 制作一个单杠
我正在努力寻找信息来使用 react-chartjs-2 制作图表。
我使用 react-chartjs-2 制作了一个条形图。我找不到有关使其成为水平条的相关信息。是否可以使用 react-chartjs-2 制作单杠？
我在条形图旁边还有一个饼图。我使用饼图中的相同数据制作条形图。
任何帮助表示赞赏。
这是我的代码。
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
})
}
render(){
const CategoriesPanel = this.state.slideOpen? "slideOpen" : "";
const { length } = this.props
var totalData …推荐指数
解决办法
查看次数
是否可以将 0 设置为条形图的最小数字？react-chart.js-2
我正在尝试使用 react-chart.js-2 制作条形图。我刚刚注意到所有条形图示例都从数据的最小数量开始，而不是 0。
下面的例子，条形图从40开始，而不是0。我想做的是从0开始做条形图，而不是数据的最小数量。
是否可以使用 react-chart.js2 来实现？
这是代码（主要来自官方示例的代码）
import React from 'react';
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
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: [65, 59, 80, 81, 56, 55, 40]
}
]
};
export default React.createClass({
displayName: 'BarExample',
render() {
return (
<div>
<h2>Bar Example (custom size)</h2>
<Bar
data={data}
width={150}
height={100}
/>
</div>
); …推荐指数
解决办法
查看次数
React ChartJS会阻止新数据在重绘后添加到状态中吗？
我正在尝试使用react-chartjs-2更新我的图表.我正在使用日期选择器来过滤不同的数据并相应地重新渲染图表,例如今天,昨天,过去7天等显示数据.数据是从我的数据库中提取的
但是,当图表被重新绘制并重新渲染时,它会被添加到我不想要的状态.我只想重新渲染请求不重新渲染的新数据,并添加到图表中的旧数据中.
我之前使用vanilla JavaScript修复了这个问题,因为我没有使用反应我使用destroy()了图表文档说使用的方法,但我不确定如何使用它与反应？
因此,经过进一步检查,我的图表似乎正在重新渲染.但是,当它被重新渲染时,额外的数据被添加到我不想要的我的chartData状态,我只是想要请求的新数据显示在图表上.我还在努力想出那个部分.
这是我的代码我有很多,所以我只会显示相关的部分:
import React from "react";
import reportsService from "../../services/reportsService";
import update from "react-addons-update";
import moment from "moment";
import { Bar } from "react-chartjs-2";
import "chartjs-plugin-labels";
import "chartjs-plugin-datalabels";
class Reportspage extends React.Component {
constructor(props) {
super(props);
this.state = {
chartData: {
labels: [],
datasets: [
{
//label: "Quotes",
data: [],
backgroundColor: []
}
]
}
};
}
chartColors() {
let colors = [];
for (let i = 0; i < 100; i++) …推荐指数
解决办法
查看次数
ReactJS如何仅在向下滚动并到达页面时才呈现组件？
我有一个react组件Data，其中包括几个图表组件；BarChart LineChart...等等。
当Data组件开始渲染时，要花一些时间才能从API接收每个图表所需的数据，然后它开始响应并渲染所有图表组件。
我需要的是仅在我向下滚动并到达页面时才开始渲染每个图表。
有什么办法可以帮助我实现这一目标吗？
推荐指数
解决办法
查看次数
React ChartJS 2：点击图表获取数据
我在 StackOverflow 和 GitHub 上发现了许多其他问题，但没有一个对我有用......
我有一个使用 ChartJS 构建的图表。当我单击任何条形（橙色、绿色或红色）时，我想获得相应的值。有什么办法可以实现这一点吗？我使用的 npm 包是react-chartjs-2。我发现它有 2 个道具可能会有帮助，但不知道在这种情况下如何使用它。它们是getElementsAtEvent和onElementsClick。这些道具在使用时会提供大量数据，除了我刚刚单击的栏的值。
这就是我导入组件的方式
import { Bar } from "react-chartjs-2";
这就是我使用该组件的方式
<Bar
data={barData}
height={275}
options={{
maintainAspectRatio: false,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
}}
/>;
变量barData如下：
const barData = {
labels: [
"04-07-2020",
"05-07-2020",
"06-07-2020",
"07-07-2020",
"08-07-2020",
"09-07-2020",
"10-07-2020",
],
datasets: [
{
label: "Cases",
borderWidth: 1,
backgroundColor: "#ffc299",
borderColor: "#cc5200",
hoverBackgroundColor: "#ed873e",
hoverBorderColor: "#e35f00",
data: [673165, 697413, 719664, 742417, …推荐指数
解决办法
查看次数
当 ChartJS 中没有重叠数据时，以全角渲染多个数据集的条形图
内举例。作为参考，我使用的是最新版本的 ChartJS (3.2.1) 和最新版本的react-chartjs-2 (3.0.3)。
我想知道如何在给定多个不同数据集的情况下使我的条形图以特定方式显示。我希望图表上的条形以其标准宽度呈现，同时还允许在必要时并排重叠。
当您使用一个数据集（该数据集可能有两个值落在同一 X 轴坐标上）时，ChartJS 将以我的“理想”方式处理此问题，但在使用多个数据集时我似乎无法模仿这种行为。
似乎每当两个数据集共享一个轴时，条形宽度要么会调整以容纳两组数据，即使它们不占据相同的空间，要么当它们占据相同的空间时它们会堆叠在一起。我的目标是仅在必要时让条形“缩小”其宽度，否则保持其全宽。
下面是我希望看到的多个数据集的示例（这是 ChartJS 在有一个数据集时处理渲染的方式barThickness: "flex"）：
在中间，您会注意到条形宽度会自动调整，以便为彼此腾出空间。
这是当我使用两个没有任何重叠点的数据集（在barThickness: "flex"两者上都设置）时得到的示例：
最后，这是一个使用两个数据集时存在一些重叠点的示例：
到目前为止，我发现解决此问题的唯一方法是创建多个 x 轴，一个用于一个数据集，一个用于另一个数据集，一个用于重叠。然后，通过操作我的数据结构，为每个轴创建数据集，其中包含与所需条形宽度相对应的数据点。
这当然是一个解决方案，但我正在处理一个生产代码库、数千行数据和几个附加数据集（所有这些数据集都有不同的状态、可见性条件和规则）。像这样一起管理所有这些几乎是不可能的，更不用说以可维护的方式了。我已经浏览了绝大多数 StackOverflow 问题和 ChartJS 文档，试图找到更简洁的解决方案，但到目前为止还不够，非常感谢您的帮助。
下面的代码的简化版本。我添加了一些未使用的片段（大部分已注释掉），只是为了展示我迄今为止尝试过的内容：
var ctx1 = document.getElementById("canvas1").getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");
var ctx3 = document.getElementById("canvas3").getContext("2d");
function getBackgroundColor(data) {
const bar = data.dataset.data[data.dataIndex];
return bar.projection ? "green" : "black";
}
const dataset1Labels = ['Mar 2021', 'Apr 2021', 'May 2021', 'Jun 2021', 'Jul 2021', 'Aug 2021']
const dataset2Labels = ['Jan 2020', …推荐指数
解决办法
查看次数
Datalabels 插件 Chartjs 显示“[object]”而不是值
我正在从 app.js 文件传递对象并将其字符串化，但它在数据标签中无法正常工作，并显示 [对象，如图所示![]](https://i.stack.imgur.com/4NP1T.png)
这是我的代码：[它在 ejs 中，但与 js 几乎相同，除了将变量传递为 <%-variable%>，而不是 ${}]
应用程序.js
let bubbleData=[];
let dataObj = {
"pastObservation": [
{
"value": "400",
"observation_time": "2021-08-12"
},
{
"value": "800",
"observation_time": "2021-08-13"
},
{
"value": "13",
"observation_time": "2021-08-11"
},
{
"value": "370",
"observation_time": "2021-08-15"
}
};
//parsing data from observation time, and value, and pushing them in array
dataObj.pastObservation.map( value => { console.log( value.value, value.observation_time ); let object={ "x": value.value, "y": JSON.stringify( Date.parse( value.observation_time ) ) }; bubbleData.push( object ); } …推荐指数
解决办法
查看次数