React中的apexchart方法

2024-01-08

我正在使用 apexcharts 并做出反应。我需要隐藏一系列,但我不知道如何在我的代码中实现这些方法。这个想法是使用 data4 进行一些计算并将其显示在自定义工具提示上。如何隐藏图表中的数据4但仍在后台使用数据?

我的代码是这样的

import Chart from 'react-apexcharts'
import React from 'react';

class ApexChart1 extends React.Component {
 constructor(props) {
   super(props);
   
   this.state = {
          series: [{
            name: 'Data1',
            data: this.props.data.map(d=>{return +d.data1})
          }, {
            name: 'data2',
            data: this.props.data.map(d=>{return +d.data2})
          }, {
            name: 'data3',
            data: this.props.data.map(d=>{return +d.data3})
          }, {
            name: 'data4',
            data: this.props.data.map(d=>{return +d.data3})
          }],
    options:
     {...,
      tooltip: {
              // console.log()
              custom: function({series, seriesIndex, dataPointIndex, w}) {

                // Here I want to use the data4 series but hide that data when the chart renders
                  
              }
            }
     }
   }


   render() {
      return (
     <div>
            <Chart options={this.state.options} series={this.state.series} type="bar" height={425} />
     </div>
   )}
 }
}

感谢您的帮助


我不确定我是否理解你的想法,但如果你想在你的函数中访问 data4 使用:

tooltip: {
     // console.log()
     custom: function({series, seriesIndex, dataPointIndex, w}) {
                let data4 = this.props.data.map(d=>{return +d.data3})
                // something to do with data4
             }
 }

如果您想隐藏图表中的 data4,只需将其从系列中删除,这样您的系列将如下所示:

series: [{
        name: 'Data1',
        data: this.props.data.map(d=>{return +d.data1})
      }, {
        name: 'data2',
        data: this.props.data.map(d=>{return +d.data2})
      }, {
        name: 'data3',
        data: this.props.data.map(d=>{return +d.data3})
      }]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React中的apexchart方法 的相关文章

随机推荐

  • VS2010项目依赖

    我在 VS2010 中有一个 C 项目和一个 C 项目 该项目将使用此 C 项目输出 它将其用于 p invoke 我想我可以通过编辑解决方案中的 项目依赖项 来确保 c 项目在 c 项目之前构建 但这似乎没有任何效果 我的构建服务器上的构
  • 无法在 Windows 10 上使用 docker 访问 localhost:8080

    当运行我的docker compose development yaml在我的电脑上 我无法连接到http localhost 8080 另外 我可以跑步docker compose f docker compose development
  • wpf如何绑定到DataContext存在?

    我在代码中动态设置数据上下文 我希望屏幕上的按钮能够启用 禁用 具体取决于是否DataContext null或不 当我分配 DataContext 时 我可以在代码中执行此操作 但如果我可以像这样绑定那就更好了 您应该能够使用DataTr
  • 通过 .htaccess 更改根文件夹

    我有一个与域名关联的共享托管帐户 根文件夹 如果术语错误请纠正我 设置为 以便服务器上的所有文件都是公共的 可以通过浏览器访问 我可以使用 htaccess 或其他东西将根文件夹更改为类似的内容 example com public 如果我
  • numpy 数组行专业和列专业

    我无法理解如何numpy存储其数据 考虑以下 gt gt gt import numpy as np gt gt gt a np ndarray shape 2 3 order F gt gt gt for i in xrange 6 a
  • 如何用Java将wav文件分成1秒的片段?

    之前我有个问题 Java读取wav文件 https stackoverflow com questions 5210147 reading wav file in java 首先 我想用 Java 读取一个 wav 文件并将其字节处理到一个
  • DataTables 服务器端分页

    我有工作 Spring REST 应用程序与客户端分页 默认由 DataTables 和一切正常 现在我需要将其更改为服务器端分页 我遇到了问题 因为不知道如何从数据表中获取客户端想要查看的页码信息 我在 DT 手册中找不到任何有用的内容
  • 对数组进行排序以避免相邻项具有重复属性

    我有一系列对象 每个对象都有一个颜色属性 可以是 红色 蓝色 黄色 绿色 橙色 或 紫色 数组中有 20 30 个对象 因此颜色重复 我的目标是对数组进行排序 以便没有颜色彼此相邻 颜色的分布并不完全均匀 但很接近 这是我到目前为止所拥有的
  • vim 过滤器和 stdout/stderr

    当我使用 通过过滤器运行文件的内容 过滤器失败 它返回除 0 之外的另一个代码 并向 stderr 打印一条错误消息 我的文件被此错误消息替换 如果过滤器返回指示错误和 或忽略过滤器程序写入 stderr 的输出的状态代码 是否有办法告诉
  • 使用 VSTO 对 Excel 插件进行单元测试

    我一直在尝试测试我的插件但没有成功 即使在查看了各种来源之后MSDN https blogs msdn microsoft com varsha 2010 08 17 writing automated test cases for vst
  • WCF 方法被调用两次

    我有一个将数据返回到桌面应用程序的网络服务 我遇到的问题是 当网络服务返回少量数据时 一切正常 但当数据量很大时 它会抛出以下异常 System Net WebException 基础连接已关闭 接收时发生意外错误 当我调试 Web 服务时
  • 以编程方式检查 DLL/EXE 文件是否使用authenticode 签名的最佳方法是什么?

    我不想验证证书 我想在构建服务器上使用它来检查所有文件并列出我们可能忘记签名的文件 怎么样使用Get AuthenticodeSignature http technet microsoft com en us library dd3476
  • 我想在 SQL 中使用递归返回新列?

    我有一个表格 其列如下所示 Employee ID Manager ID E068 E067 E071 E067 E229 E069 E248 E144 E226 E223 E236 E241 E066 E001 E067 E001 E14
  • 在控制台应用程序中人为填充 HttpContext 对象

    我正在为 log4net 编写一个包装器库 该库应该能够捕获上下文信息 例如查询字符串 cookie 表单字段等 我从控制台应用程序调用这个包装类 而不是 TDD 类 有没有办法在控制台应用程序中填充 HttpContext 对象 如下所示
  • 如何安装 clang 头文件?

    我在 MacOS 上安装了 clang 在 usr bin clang 中 我认为 Mac 上默认安装了 clang 但是 当我尝试在脚本中包含 clang 头文件时 它说找不到它们 Example cpp 1 10 fatal error
  • 如何开发具有交错列和自调整大小单元格的自定义 UICollectionViewLayout?

    我正在开发一个已经在 Android 上开发的应用程序的 iOS 版本 该应用程序具有以下 2 列自调整大小 宽度固定但高度可变 单元格的网格 在 Android 版本中实现这一点很容易 因为 Google 提供了StaggeredGrid
  • 共享库如何在混合 64 位/32 位系统中工作?

    早上好 在 64 位 RedHat 机器上 我们必须编译并运行 32 位应用程序 同时 我设法编译了所需的 gcc 版本 4 0 3 和 32 位所需的所有运行时库 并将 LD LIBRARY PATH 设置为指向 32 位版本 但现在在剩
  • 评估 VS Code 扩展中的环境变量

    我正在 VS Code 中开发一个扩展 以添加对 OpenSCAD 基于脚本的 3D 建模程序 的语言支持 目前 我一直在研究一种从 VS Code 在 OpenSCAD 中打开 预览文件的方法 我已经能够使用自己的预览管理器成功完成此操作
  • 汇编 NASM 中的随机数生成

    我正在从事汇编 nasm 的大学项目 唯一的问题是我无法生成 162 到 278 之间的偶数随机数 我尝试了很多算法 但似乎无法限制范围内的数字 是否有一个小技巧或调整来获得范围内所需的数字 目的是在屏幕上随机显示一个水果 主要是贪吃蛇游戏
  • React中的apexchart方法

    我正在使用 apexcharts 并做出反应 我需要隐藏一系列 但我不知道如何在我的代码中实现这些方法 这个想法是使用 data4 进行一些计算并将其显示在自定义工具提示上 如何隐藏图表中的数据4但仍在后台使用数据 我的代码是这样的 imp