Apexcharts - ReactJs -实时-无法读取未定义的属性'filter‘
基础概念
ApexCharts 是一个现代的 JavaScript 图表库，适用于 React、Vue 和 Angular 等前端框架。它提供了丰富的图表类型和交互功能，适用于数据可视化的各种场景。
ReactJS 是一个用于构建用户界面的 JavaScript 库，它允许开发者通过组件化的方式来构建复杂的 UI。
相关优势
- 丰富的图表类型：ApexCharts 提供了多种图表类型，如折线图、柱状图、饼图等，能够满足不同的数据可视化需求。
- 高度可定制：图表的外观和行为可以通过配置选项进行高度定制。
- 良好的性能：ApexCharts 设计了高效的渲染机制，能够处理大量数据并保持流畅的用户体验。
- 易于集成：与 ReactJS 等前端框架集成简单，只需安装相应的包即可。
类型
ApexCharts 支持多种图表类型，包括但不限于：
- 折线图（Line Chart）
- 柱状图（Bar Chart）
- 饼图（Pie Chart）
- 面积图（Area Chart）
- 散点图（Scatter Chart）
应用场景
ApexCharts 适用于各种需要数据可视化的场景，如：
- 数据分析报告
- 业务监控仪表盘
- 金融数据分析
- 科学研究数据展示
问题分析与解决
问题描述
在使用 ApexCharts 和 ReactJS 时，遇到“无法读取未定义的属性 'filter'”的错误。
原因分析
这个错误通常是由于在组件初始化时，某些依赖项尚未准备好，导致尝试访问未定义的属性。
解决方法
- 确保依赖项已安装：
确保你已经安装了
apexcharts和react-apexcharts包。 - 确保依赖项已安装：
确保你已经安装了
apexcharts和react-apexcharts包。 - 正确导入和使用组件：
确保在组件中正确导入和使用
ApexCharts组件。 - 正确导入和使用组件：
确保在组件中正确导入和使用
ApexCharts组件。 - 检查数据初始化： 确保在组件挂载之前，所有数据都已经正确初始化。
- 检查数据初始化： 确保在组件挂载之前，所有数据都已经正确初始化。
- 调试信息： 如果问题仍然存在，可以添加一些调试信息来检查数据是否正确加载。
- 调试信息： 如果问题仍然存在，可以添加一些调试信息来检查数据是否正确加载。
通过以上步骤，你应该能够解决“无法读取未定义的属性 'filter'”的问题。如果问题依然存在，请检查控制台中的详细错误信息，以便进一步定位问题。
参考链接
相关·内容
我有一个在作曲家(钩子)中创建的图表： return (
) 我尝试添加一些值来测试实时的可能性。(没有它，它工作得很好!)我的问题是，我尝试了几个小时，没有找到为什么我有这个例外。 因此，我在选项中将我的图表命名为“candle”： {
chart: {
type: 'candlestick',
height: 290,
id: 'candles'
{...}
},
{...}
} 因此，我经常尝试使用ApexCharts的exec方法手动添加更多数据：
浏览 116提问于2020-08-06得票数 3
回答已采纳
我正在与()合作，试图将一些模板迁移到我自己的安装中。我遇到的问题是，我试图使用()，( RequireJS )加载所有脚本，而ApexCharts ()没有正确加载脚本。我的RequireJS配置的相关部分如下：
requirejs.config({
shim:{
'apexcharts':{'exports':'ApexCharts'}
},
paths:{
'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts
浏览 1提问于2021-02-05得票数 0
从vuetify LTS更新到vuetify 2.0.0-beta.5时遇到了问题。
在所有的工作都很成功之前，vuetify样式都是从app.scss加载的。
错误：
Vue警告:查看器“isDark”的getter错误："TypeError:无法读取未定义的属性‘黑暗’“
TypeError:无法读取未定义的属性“黑暗”
Vue警告:呈现错误："TypeError:无法读取未定义的属性‘黑暗’“
我已经卸载了vuetify，然后安装并更新到像这个这样的beta版本
package.json
{
"devDependencies": {
&
浏览 0提问于2019-07-05得票数 5
回答已采纳
我试图通过使用.includes()函数在输入字段中键入数据表的行来筛选数据表中的行，但它会引发以下错误：
TypeError:无法读取未定义的属性“包含”
// Create variable for json data
const countries = this.state.fullData;
// Map through API results and create an object
let rows = countries.map((countries, index) => {
return (
浏览 3提问于2020-07-07得票数 0
2回答
我需要帮助"TypeError:无法读取属性‘缓存’的未定义“。 let members = guild.members.cache
.filter(function (member) {
return member.user.bot === false && member.user.id != member.guild.ownerID;
})
.map(function (member) {
浏览 26提问于2021-02-06得票数 0
回答已采纳
我想传递(返回)数据过滤值和子文本，我能够传递数据过滤值，但无法传递子文本。我的HTML和JQuery如下所示：
$(document).ready(function() {
$('.sidebar-filter').on('click', function() {
var filterobj = {};
$(".sidebar-filter").each(function(index, ele) {
var filterval = $(this).children('a').text();
浏览 6提问于2021-12-19得票数 0
回答已采纳
我已经启动了一个新的react应用程序--并开始安装d3v4和一个基本饼图--但现在我得到了scaleOrdinal()错误和d3.arc()错误"TypeError:无法读取未定义的属性‘圆弧’“
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(innerradius);
浏览 0提问于2020-06-09得票数 1
回答已采纳
我加入了一个react本机项目，我意识到这里有些东西和它的CSS不同，但我认为javascript也有一些不同之处。因为我在以下代码上有一个错误：
const makeVal = arr =>
arr
.filter( i => i.checked )
.map ( i => i.label )
.join(', ');
有时，该函数会出现以下错误：
未定义TypeError:无法读取未定义属性的“筛选器”
我找不到，我们的领导告诉我这是你的错？但我认为这是后端团队的错误，因为他们在API中传递数据。
我怎么能写这个不会出错
浏览 0提问于2018-11-22得票数 1
回答已采纳
编译失败
找不到./node_modules/react-apexcharts/dist/react-apexcharts.min.js模块:无法解析
'Z:\React\misc-examples\node_modules\react-apexcharts\dist‘
此错误发生在构建期间，不能取消。
浏览 1提问于2022-06-09得票数 -1
回答已采纳
1回答
我对过滤器的使用有问题。在我的componentDidMount中有：
async componentDidMount(){
window.scrollTo(0, 0)
this._resetForm(true)
const id = this.props.match.params._id;
//there is the problem
const currentWarehouse = this.props.user.db
console.log("curre
浏览 2提问于2020-05-28得票数 0
回答已采纳
我有一个映射函数，它应该从我创建的列表中获取数据并显示给用户，但是每当我尝试这样做时，它会给我一个类型错误，下面是我的映射函数：
{product.map((item, idx)=>
<div key={idx}>
<h3 className='productName'>{item[idx].name}</h3>
<div className='productImageContainer'>
浏览 6提问于2020-10-05得票数 0
回答已采纳
3回答
我有一个jquery函数，它应该根据单击按钮的Service值过滤数据源。
我用这篇关于telerik的文章来获得我的指导：
由此，我创建了这个buttonFilter()函数：
function buttonFilter() {
var buttonText = 'All';
var button = $('#ReadTypeBtnGroup > button.btn.btn-default.active');
if (button != null) {
buttonText = button.val();
浏览 1提问于2021-02-02得票数 3
回答已采纳
1回答
解决了：解决方案在底部
我有一个下拉菜单，可以更改组件的当前状态。就像这样：
<select onChange={event => this.setState({typeofList: event.target.value})}>
<option value="list.A">List A</option>
<option value="list.B">List B</option>
</select>
问题是，当我设置状态时，只要单击菜单中的某个项，它就会抛出一个错误。这是因
浏览 2提问于2017-08-18得票数 0
回答已采纳
2回答
我正在构建一个使用json的应用程序，并将其与搜索过滤器输入和其他内容一起列出。 我已经尝试创建该函数，但它不起作用。 Codesandbox URL https://codesandbox.io/s/vue-template-7iev3?fontsize=14 search: "", 它显示"TypeError:无法读取未定义的属性'search‘“，但其已定义
浏览 24提问于2019-09-10得票数 0
我已经在Visual代码中创建了类型记录项目。增加了一些基本的配置，并使用npm下载了一些lib。
我有一个简单的main.ts文件，代码如下：
import ApexCharts from 'apexcharts'
var chart = new ApexCharts(document.querySelector("#chart"), {...});
chart.render();
和tsconfig.json：
{
"compilerOptions": {
"module": "com
浏览 3提问于2019-08-13得票数 0
回答已采纳
1回答
我对React非常陌生，而且我在为我的第一个React项目获取数据的过程中挣扎了好几天。
我基本上有一个卡片列表，分为两个部分: CardsList和Card。我想做的是获取每一张卡的数据。我的问题是，对于单个端点，我几乎不了解抓取是如何工作的，同时尝试从多个端点获取数据似乎比我更难。
我试着从一个解释fetch的博客中学到一个例子，并想出了如下内容：
export default class CardsList extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 2提问于2017-09-22得票数 1
回答已采纳
我有以下代码，它返回错误：
“无法读取未定义的属性'albumCover‘
基于第24行的代码。
import React, {Component} from 'react';
import albumData from './../data/albums';
class Album extends Component {
constructor(props) {
super(props);
const album = albumData.find( album => {
浏览 3提问于2018-02-05得票数 0
回答已采纳
我有下一个代码
componentDidMount() {
super.componentDidMount();
let jobj = $(ReactDOM.findDOMNode(this));
$.validator.unobtrusive.parse(jobj);
}
运行此操作后，我得到错误：Uncaught TypeError:无法读取未定义的属性“未公开”
如何才能使导入ASP.MVC不显着和jquery验证？
浏览 4提问于2015-11-17得票数 2
2回答
Reactjs卡
、、
错误：
TypeError:无法读取未定义的属性“卡片”。
如果我删除内容className={classes.card}，它可以正常工作。
但没有课，我就不能用康斯特·斯泰尔斯。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent, CardMedia } from
浏览 1提问于2017-09-09得票数 1
回答已采纳
我将Apexcharts的简单甜甜圈图导入到我的Vue.js项目中，但是，即使在跟踪了它们的上提供的文档之后，图例标题仍然保持为“series-1，series-2，.”。
下面是渲染的图片：
正如您所看到的，我正在跟踪文档，将series和labels添加到数据对象和div元素中，但由于某些原因，仍然无法呈现正确的标签。
我该如何解决这个问题？
附带注意:将legend.show从false切换为true什么都不做。
<div id="donut-chart">
<v-container>
<div id="ch
浏览 3提问于2019-03-18得票数 4
回答已采纳
你好，我正在学习反应js，我遇到了一个问题。当我试图使用react路由器返回到主页时，我会得到以下错误：
未定义TypeError:无法读取未定义属性的“推送”
下面是我的代码，正如您所看到的，我正在调用导航函数：
我的带有路由器的client.js：
如果我将this.props.router.push('/');替换为this.props.history.push('/');，它就能正常工作。有什么问题吗？
浏览 5提问于2016-05-06得票数 12
回答已采纳
我在我的项目中使用vue.js。此外，我使用websocket作为我的数据。每一秒都有数据。我需要在我的项目中使用实时图表。但我没有找到任何解决问题的图表。例如，我使用apexchart，但当新数据出现时，它在我的图表中没有刷新数据。
我的websocket数据如下：
{
"topic": "2",
"message": "data"
}
我的数据库数据如下：
{
"id": "1",
"deviceName": "refrigerator&#
浏览 4提问于2020-12-19得票数 1
我开始使用ApexChart创建图表，但是当我试图更新图表时，它返回了一个错误"c是未定义的“。
下面是我创建图表的方式。dates是一个具有某些日期的数组，其值为带有数字的数组。
var options = {
chart: {
height: 350,
type: 'area',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
浏览 3提问于2020-03-20得票数 0
回答已采纳
我一直试图在ApexCharts的“简单甜甜圈图”的内部添加一个数字。这是它的链接- 。
为了使用这个图表，我在我的项目终端中运行了命令"npm安装apexcharts -保存“。
这是我的HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.
浏览 4提问于2020-03-23得票数 3
我正在尽我最大的努力从数组中删除一个项目。
我试图将其过滤如下：
removeContact(contact) {
this.setState({
contacts: this.state.contacts.filter((_, i) => i !== contact)
}); }
但这似乎不起作用。
我的联系人列在无序列表中，如下所示：
<ul className="list-group">
{this.state.contacts.map(((contact, index) =>
<li classN
浏览 0提问于2018-10-24得票数 0
回答已采纳
1回答
我正在制作一个反应足球应用程序。当从夹具列表中选择时，我的组件之一应该显示有关夹具的更多细节。我是通过从点击中导入ID来设置夹具，然后将我的固定装置列表(从API中获得)过滤到这个ID中。然后，我希望设置球队名称、体育场、日期等的变量，以便在我的应用程序中呈现这些参数。
我的代码如下所示
const gameID = useLocation()
let fixture = worldcupFixtures.filter(fixtures => fixtures._id == gameID.state._id)
let home = fixture[0].teams.home.name
l
浏览 6提问于2022-10-26得票数 -1
我的密码怎么了？
import React, { Component } from "react";
// import {connect} from 'react-redux';
// import List_items from './list_items';
// @connect(item => ({data: state.example.data}))
class Home extends React.Component {
constructor(){
super();
this.state = {
浏览 1提问于2017-12-08得票数 0
回答已采纳
当在子组件Job中单击条形图(ApexCharts)时，我正在构建一个小应用程序--试图从父组件SummaryChart中调用一个函数。
当然，我阅读的方法是在Job中定义一个名为getSequenceView的函数，并将它在别名handleBarClick下的一个支柱传递给图表，然后从SummaryChart调用this.props.handleBarClick在父函数中调用它。
父组件
class Job extends Component {
constructor(props)
{
super(props);
this.state = {
...
浏览 1提问于2021-04-30得票数 1
回答已采纳
我不明白，在控制台中，我看到了我的api数据(10个对象的数组)，但是如果我在保存文件时访问"data.data.length“，它就能工作(显示号: 10在控制台中)，但是当我刷新浏览器时，会出现错误(Uncaught:无法读取属性‘长度’的未定义)。
我还发现当我的页面刷新时，它首先是console.log“未定义”，然后是我的10个对象的数组api数据……
我太迷茫了，我做错什么了？
import React, { useState, useEffect } from 'react';
import '../App.css';
import axi
浏览 2提问于2021-07-02得票数 0
回答已采纳
在我向routerConfig添加"useHash:true“和”我的面积图“成为折线图之前，我的ApexCharts”面积图“一直工作正常。 在routerConfig中使用"useHash:true“时，如何恢复我的面积图？ package.json摘录 {
"dependencies": {
"apexcharts": "3.22.2",
"ng-apexcharts": "1.5.6",
},
"devDependencies": {
"@a
浏览 20提问于2021-04-05得票数 0
回答已采纳
4回答
我试图在render函数中立即打印我的输入值。
在React组件中的文档中，我看到了constructor与super(props)以及this.state的使用。
当我尝试相同的时候，我会得到下面的错误；
未定义TypeError:无法读取未定义属性的“状态”
下面是我的代码；
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ''
};
};
handleChange(event) {
浏览 0提问于2016-10-24得票数 1
回答已采纳
使用apexChart创建一个图形。
我用的是react，类型记录，next.js。
我在选项处得到以下类型错误。
errrMessage类型'{ string[]；图表：{ type:字符串；高度:数字；}；}；plotOptions：{ bar：{水平:布尔；dataLabels：{位置:字符串；}；dataLabels：{启用:布尔；offsetX:数字；样式：{ fontSize:字符串；颜色: string[]；}；}；笔画：{.；}；工具提示：{.；}；xaxis：{；}；回应：{.‘不能指定键入“ApexOptions”。“chart.type”的类型在这些类型之间是不兼
浏览 6提问于2021-10-26得票数 0
回答已采纳
1回答
在我的react应用程序中，我有类似below.the错误发生的代码是未定义的removeOperation.when，我在网上检查了错误，错误是因为 this .函数引用和解决方案
fields = this.state.operations.map(function(operation,index){
if(operation == "adjust-price-multiply"){
return (<PriceMultiply key={index} removeOperation={this.removeO
浏览 3提问于2016-05-11得票数 0
回答已采纳
我正在写一个小的covid项目，并试图使用ApexCharts绘制确认的感染数据，但图形没有显示。我在两个表中输入来自vuex的数据。数据是有效的，但是它来自代理对象中的api和sa。我做错了什么？(我使用ApexCharts是因为vue Chartjs与vue 3不兼容)。 <template>
<apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</template&
浏览 81提问于2020-12-04得票数 1
回答已采纳
2回答
我试图连接单词，同时，删除，空和未定义。目前仍然在下面的图像中出现错误。有人会怎么解决这个问题？
在图片中，其中一个属性是
TypeError:无法读取未定义属性
就像它一开始就不能读取参数，应用未定义的过滤器等等。
get copyFromDescription() {
if (this.addressId == 0) {
return 'Select';
} else { return [this.apn, this.combinedAddress,this.addressType.addressTypeDescription].fil
浏览 1提问于2019-12-03得票数 0
回答已采纳
我正在尝试获取'container‘div中的子元素的计数。 let ElementRef = useRef()
useEffect(() => {
let Elementcount = ElementRef.childNodes.length
console.log(Elementcount)
})
return (
<div className='container' ref={ElementRef}>
<p>paragraph o
浏览 37提问于2021-07-05得票数 1
回答已采纳
我只是试图循环遍历对象数组，如果值是空的、未定义的和空的，则应该弹出警告消息。
有什么简单的方法可以找到数组的对象是否有值或未定义
如果有任何可用的帖子，请把我贴在这里
有人能帮我吗
这是下面的截图
在这里，我只显示需要循环遍历的对象，并检查是否未定义。
编辑过的
handleGobackToBoards =() =>{
const compareWidgetData = this.props.storyboardList.boardList.map((data, key) => {
if (data.boardId === this.props.selectedBo
浏览 0提问于2018-06-07得票数 0
回答已采纳
1回答
我正在使用顶点图表(https://apexcharts.com/)动态显示一些数据，其中一些数据可能是货币，一些可能是百分比等等。 我有一个组件，它在数据函数中的数据类型如下： data: function(){
return{
chartOptions: {
colors: ['#FEB910', '#00ABE7', '#949698'],
height: 500,
dataType: 'percentage' // dynamic - could be curr
浏览 11提问于2019-02-15得票数 0
2回答
改变甜甜圈图的边框颜色
、、、
我用APEXCHARTS做了个甜甜圈图。看起来是这样的：
这是我的代码：
var options = {
series: [44, 55, 41, 17, 15],
labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'test'],
chart: {
type: 'donut',
foreColor: '#ffffff'
浏览 0提问于2020-02-19得票数 3
回答已采纳
我使用的是react-apexcharts：https://github.com/apexcharts/react-apexcharts。 当我导入一个将库导入到页面中的组件时，当我导航到它(客户端路由)时，它工作得很好。但是，当直接使用URL访问页面时，我得到一个错误： Cannot read property 'document' of undefined
TypeError: Cannot read property 'document' of undefined
at Object.<anonymous> (C:\Users\a\Deskt
浏览 36提问于2018-12-22得票数 2
我试过使用顶级图表，但没有找到适合react-apexcharts的文档。我也尝试过react-google-charts，虽然它工作得很好，但它的两侧有多余的空间，破坏了布局。我不确定要使用哪个模块。你有什么建议吗？？
浏览 3提问于2018-10-15得票数 5
回答已采纳
请看下面的代码：
var arr = [ ];
$('a').filter(function () {
var hf = this.href;
if(hf.indexOf('www.') === 0)
hf = hf.slice(4);
hf = this.href.split('/')[2];
hf = hf.split('.').slice(-2).join('.');
浏览 0提问于2015-04-20得票数 0
回答已采纳
此代码：
$.each(variant['photos'], function( index, object ) {
object['idx'] = index;
if(index == 0) object['active'] = true;
});
产生以下错误：
错误未定义TypeError:无法读取未定义的属性“照片”
浏览 0提问于2018-03-10得票数 0
2回答
无法更新Apex图表组件值
、、、、
我正在使用库在Vue.js中绘制散点图上的数据。我可以使用Axios发布数据。通过执行console.log()查看所接收的数据，可以看到数据进入浏览器。通过使用updateChart()函数(这是Apex图表属性)，我对传入的数据执行必要的操作。我无法将数据发送到数据数组。您可以找到应用程序图表的参考示例。
Chart.vue
<template>
<div class="grid ml">
<div id="main">
<h1 class="header ml">SEA
浏览 6提问于2021-01-27得票数 3
回答已采纳
我正在使用react和apexcharts来实时绘制从蓝牙设备接收到的数据。为了实现流畅的动画，我必须创建一个使用setTimeout()函数的呈现循环，该函数每秒钟触发一次，并使用引用最新接收数据的useRef()钩子。
useEffect(() => {
let bioFeedbackDataAnimation: number;
bioFeedbackDataAnimation = window.setInterval(() => {
if (stateRef.current) {
ApexCharts.exec('realtime'
浏览 13提问于2022-03-14得票数 0
我是vue开发的新手，我正在尝试显示一个有4个图表的页面。我希望它们以2x2的格式显示，所以2个相邻的，另一个在它们下面，也是彼此相邻的。 我从尝试做第一个开始，这是一个“带有数据标签的列”，可以在这里看到https://apexcharts.com/vue-chart-demos/column-charts/column-with-data-labels/。 我已经使用npm install apexcharts --save安装了这些模块。 我已经用Visual Studio代码制作了两个文件。 这是index.html <html>
<head>
浏览 15提问于2020-03-24得票数 1
回答已采纳
1回答
我正在做一个实时聊天应用程序，我想让用户上传他们自己的图像作为化身。当用户上传图像时，后端显示以下URL: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg.但是，当我登录到应用程序并检查控制台时，会收到以下消息:不允许加载本地资源: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg.我正在测试，然后我决定将输入类型从文件更改为URL，然后粘贴google图像的随机地址，然后当我将其加载回应用程序时，图像就消失了。是否有任何方式允许用户上传的图像被
浏览 7提问于2022-06-25得票数 -1
我是新的反应，并创建了一个简单的应用程序从一个教程。在本教程中，它们使用了无状态组件，而我则更改为有状态组件。但我发现了这个错误
TypeError:无法读取未定义的属性“映射”
我不知道我的代码哪里出错了。对我来说似乎没问题。
message-list.js
import React, { Component } from 'react';
import MessageView from './message-view';
class MessageList extends Component {
state = {
messages:
浏览 0提问于2018-10-15得票数 1
回答已采纳
2回答
我想要做的是，当页面被加载时，它应该从parse.com数据库中提取所有数据并显示在页面上，并且我希望在完成查找请求之后呈现我的组件。
下面你可以看到我的代码
var Ap = React.createClass({
render: function(){
Parse.initialize("mSWrLtmIHQdh8CNGk14fLbnK4gaVDbgvjw1zTeCT", "qKDkELvVpvgkuDDZzGK2pdP5o69LBDjWaRI2XfUb");
var GameScore = Parse.Object.ext
浏览 2提问于2015-07-23得票数 1
回答已采纳
我的实时服务器使用mod_headers来设置一个语法如下的值-
Header set MY_FILE "MY_VALUE"
在传递到我的应用程序之前，是否有一个潜流过滤器来设置请求头中的值？
<subsystem>
<filters>
<response-header name="server-header" header-name="Server" header-value="WildFly/8"/>
<response-header name="
浏览 3提问于2016-07-27得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
