标签: apexcharts

你会在这篇文章中找到答案

我是 React 新手，我使用了 apexcharts，它工作得很好，但是当我必须在同一个项目中的其他组件中使用这个图表组件时。这就是我在图表中遇到问题的地方。突然间，当系列发生变化时，我的图表开始不再更新。我花了一周的时间找出问题所在，并认为我可以在这里分享它，以便有人可以更早地找到此修复程序。

所以我发现了两件事；

1. React-apexcharts 只是 apexcharts 的包装，每个图表都应该有一个您在选项中定义的唯一图表 id。因此，如果您想在多个地方使用组件，最好在 props 中接收图表 ID 并将其设置为：

...
this.state = {
      options:  {
        chart: {
          id: props.chartId,
...

2. 我们可以通过在componentDidMount()或UseEffect()中使用全局 apexcharts 方法来调用方法来渲染图表或覆盖图表的系列数组，例如，

import apexchart from "apexcharts";
...
  componentDidUpdate(){
    const {chartId, seriesData} = this.props;
    //here it overrides the chart series with seriesData from props
    apexchart.exec(chartId,'updateSeries', seriesData);
  };
...

我们可以从 apexcharts 中使用其他许多有用的方法，如文档中所述：https ://apexcharts.com/docs/methods/

我希望有人觉得它有帮助。

谢谢。

我在 GitHub 上看到这篇关于圆角条形图的文章 ( https://github.com/apexcharts/apexcharts.js/issues/422 )，想知道如何圆角我正在使用的版本 3.27.3 的图表底部。我希望我的图表看起来像这样： 香肠图 目前它们看起来像这个 条形图 正如你所看到的底部不是圆形的

这些是我的选择：

    chart: {
      background: "transparent",
      foreColor: "#333",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: false,
      },
    },
    legend: {
      show: false,
    },
    grid: {
      show: false,
    },
    xaxis: {
      categories: [],
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      labels: {
        show: false,
      },
    },
    yaxis: {
      labels: {
        style: …

当我在 Typescript 中使用 React-apexchart 时出现此错误。有谁知道为什么会发生这种情况？

/Users/apple/Downloads/stake-governance/src/components/chart/AreaChart.tsx
    TypeScript error in /Users/apple/chartapp/src/components/chart/AreaChart.tsx(113,10):
    'ReactApexChart' cannot be used as a JSX component.
      Its instance type 'ReactApexChart' is not a valid JSX element.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/apple/Downloads/stake-governance/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props  TS2786
    
        111 |     <div className={cx('area-chart')}>
        112 |       <div id="chart" style={{ height: 480 …

我正在尝试使用apexChartsjavascript 库并且在实现 click 事件时遇到了问题 我已经阅读了文档，但是没有关于如何实现它的明确示例。

到目前为止，我有这个代码。

var options = {
            chart: {
                height: 350,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val + "%";
                },
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#304758"]
                }
            },
            series: [{
                name: 'Inflation',
                data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
            }],
            xaxis: {
                categories: ["Jan", "Feb", …

我将 ApexCharts 与 Vue 包装器一起使用。我可以通过使用函数设置最小值和最大值来成功更改它们。this.options.yaxis[0].min = Number(4500); 例如，当我在控制台中注销时，该值就是我设置的值。然而，它似乎对图表本身没有影响，刻度仍然读取推送系列的默认值。

initGraph(data) {
  var tempNum = 0;
  var tempNum2 = tempNum;
  this.options.yaxis[0].max = Number(5000);
  this.options.yaxis[0].min = Number(4500);
  console.log(this.options.yaxis[0].min);
  console.log(this.options.yaxis[0].max);
  for (var series in data) {
    this.series.push(data[series]);
  }
}

我的目标是当新系列被过滤到系列对象中时更改 y 轴上的比例。

我使用 vue-apexcharts 在仪表板中绘制图表。我创建了一个通用文件，其中包含所有图表的基本选项（以统一样式和代码可重用性），并在必要时使用mergeDeep() 函数扩展/覆盖该对象。xaxis 类型默认定义为“类别”，如果“日期时间”图表需要，此值稍后会更改。

当将 xaxis.type 覆盖为“datetime”时，图表会失败并显示 unix 纪元值而不是格式化的字符串日期。如果图表是独立的或者如果我从基本选项文件中删除 de xaxis.labels 对象，则不会发生这种情况。

我正在使用最新的 apexchart (3.8.0) 和 vue-apexcharts (1.3.6) 版本。

使用 new Date() 可以正确创建日期。

我尝试过的事情：

1. 独立图表。有效，但我可能需要合并图表

2. 删除 apexchartGenericOptions.js 对象中的 xaxis.labels 对象。有效，但轴没有样式。

3. 使用 JSON.parse(JSON.stringify(options)) 深度克隆所有单独的选项对象。mergeDeep() 函数使用 Array.reduce 创建一个完整的新对象，因此它不应该是突变问题。不起作用。

4. 重置几个我不知道在哪里创建的属性convertedCatToNumeric: true，和categories: []。不起作用

我创建了一个codesandbox示例

x轴配置在apexchartGenericOptions.js

export default {
  (...)
  xaxis: {
    type: 'category',
    labels: {
      show: true,
      style: { colors: '#bcc6d3', fontSize: '10px', fontFamily: 'Nunito Sans, sans-serif' },
    },
    axisBorder: …

我正在尝试在 Apexcharts 中设置图表的高度，但无论我尝试什么，它似乎都只能在响应模式下工作。

任何想法？

这是一个Codesandbox（这是他们文档中的基本示例，加上我添加了高度）。谢谢你的帮助。

我在使用时遇到一种情况，apexcharts其中一列非常小。渲染工具提示很困难，因为您必须非常小心地将鼠标悬停在列上。

问题：有没有办法扩大悬停区域，以便更容易悬停列？或者也许有一个选项可以在悬停整个垂直区域（列上方和下方的空间）时呈现工具提示？谢谢你！

有问题的游乐场：https://codesandbox.io/s/react-basic-example-forked-nw3ll ?file=/src/App.js

如果字长太长，我想显示 Vue 工具提示或悬停时，我需要显示标签的全名。我尝试了很多研究，但没有任何效果。

https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/# https://github.com/apexcharts/apexcharts.js/issues/2281。

我希望当用户将鼠标悬停在 Y 轴标签上时，我需要显示全文。

我正在使用条形图

这是我对 API 的回复

[
{
    "name": "Meetings",
    "data": [
        15,
        05,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
},
{
    "name": "R & D",
    "data": [
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
}
]

   


[
{
    "name": "Meetings",
    "data": [
        15,
        05,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
},
{
    "name": "R & D",
    "data": [
        10,
        10,
        10, …
Run Code Online (Sandbox Code Playgroud)

我正在使用两个库编写一个角度应用程序：ngx-bootstrap 和 ng-apexcharts。ApexCharts 提供了一个名为 的角度分量，它接受类型为 的<apx-chart>输入。html 看起来像这样：tooltipApexTooltip

  <apx-chart 
    [series]="[{data: timelineData}]"
    [chart]="timeline.chart"
      [fill]="timeline.fill"
      [legend]="timeline.legend"
      [plotOptions]="timeline.plotOptions"
      [xaxis]="timeline.xaxis"
      [colors]="timeline.colors"
      [title] = "timeline.title"
      [tooltip]="timeline.tooltip"
      [yaxis] = "timeline.yaxis"
   ></apx-chart>

以下是角度顶点图表文档的链接：https ://apexcharts.com/docs/angular-charts/

ngx-bootstrap 提供了一个名为的模块TooltipModule，当导入到应用程序模块中时，允许您在任何元素上放置tooltip属性，并且当用户将鼠标悬停在该元素上时，它将创建一个工具提示。看起来是这样的：

  <button type="button" class="btn btn-default btn-secondary mb-2"
      tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
      placement="top">
    Tooltip on top
  </button>

以下是 ngx-bootstrap 工具提示文档的链接：https://valor-software.com/ngx-bootstrap/#/tooltip

我试图一起使用这两个库，但是当我将工具提示模块添加到应用程序模块导入中时，出现编译错误。

@NgModule({
  imports: [
    BrowserModule,
    TooltipModule.forRoot(),
    ...
  ]
...

Error: src/app/activity-report/details/details.component.html:52:8 - error TS2322: Type 'ApexTooltip' is not assignable to …