标签: apexcharts

问题

当我在任何文件中时，我的 Next.js/React/Node 应用程序崩溃import Chart from "react-apexcharts"。尝试访问应用程序会导致以下错误：（
Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
请参阅下面的调用堆栈）。
无论导入的内容<Chart/>是在页面中呈现还是未使用，都会发生这种情况。有趣的是，如果我保存文件并启动 Next.js 快速刷新，我的应用程序就会开始正常工作（有时）。但是，当我刚刚启动应用程序并尝试访问它时，或者当我使用f5手动刷新时，会发生上述错误。基本上，它仅在 Next.js 快速刷新后才起作用（有时，大概是随机的，它在这种情况下也不起作用，抛出与以前相同的错误）。

环境

Node.js (14.16.0)、React (17.0.2)、Express (4.17.1)、Next.js (10.2.0)、react-apexcharts(1.3.9)、apexcharts(3.26.3)、Edge 浏览器、Win10。
Next.js 服务器与 Express 服务器集成在一起。

记录

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\georg\Documents\development\web\projects\Angelina-Website\node_modules\apexcharts\dist\apexcharts.common.js:6:345884)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)   
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)        
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at …

我正在尝试将 apexcharts 用于 next.js 应用程序，但它返回窗口未定义。

我希望得到任何帮助。

有人知道发生了什么以及为什么吗？

import React from 'react';\nimport Chart from 'react-apexcharts';\n\nexport default class Graficos extends React.Component <{}, { options: any, series: any }> {\n    constructor(props:any) {\n        super(props);\n\n        this.state = {\n            options: {\n            chart: {\n                id: "basic-bar"\n            },\n            xaxis: {\n                categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]\n            }\n            },\n            series: [\n            {\n                name: "series-1",\n                data: [30, 40, 45, 50, 49, 60, 70, 91]\n            }\n            ]\n        };\n    }\n  \n    render() {\n        return (\n …

我想导入使用“window”属性的 apexChart 库，但在控制台中出现错误。

[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window is not defined

我尝试在安装后使用 apexCharts，但错误并没有消失。

[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window is not defined

当我确定浏览器存在时，我尝试导入 apexCharts。

<script>
 import ApexCharts from 'apexcharts'
 import { onMount } from 'svelte'
 const myOptions = {...myOptions}
 onMount(() => {
   const chart = new ApexCharts(document.querySelector('[data-chart="profit"]'), myOptions)
   chart.render()
 })
</script>

但我收到错误“‘导入’和‘导出’可能只出现在顶层”

我尝试在 svelte.config.js 中禁用 ssr

 import { browser } from '$app/env'
 if (browser) {
   import ApexCharts from 'apexcharts'
 }

我尝试创建一个导入 apexChart 库的组件，并创建了一个条件，仅当浏览器存在时才使用该组件 …

我正在使用 ApexCharts 来显示一些统计数据。我想隐藏图像中标记为红色的 x 轴工具提示

以下是一个有角度的应用程序，其中的图表由顶点图表组成

https://codesandbox.io/s/apx-column-distributed-d3ns7?from-embed

如何删除该图表及其轴线的水平线（这样看起来更干净）

    this.chartOptions = {
      series: [
        {
          name: "distibuted",
          data: [21, 22,]
        }
      ],
      chart: {
        height: 350,
        type: "bar",
        events: {
          click: function(chart, w, e) {
            // console.log(chart, w, e)
          }
        }
      },
      colors: [
        "#008FFB",
        "#00E396",
      ],
      plotOptions: {
        bar: {
          columnWidth: "45%",
          distributed: true
        }
      },
      dataLabels: {
        enabled: false
      },
      legend: {
        show: false
      },
      xaxis: {
        categories: [
          ["John", "Doe"],
          ["Joe", "Smith"],
        ],
        labels: {
          style: {
            colors: [
              "#008FFB",
              "#00E396",
            ],
            fontSize: …

我正在使用 apexChart 创建一个图表项目。我的目标是隐藏具有奇数 xaxis 元素索引的 xaxis 标签。经过几个小时的网络研究，我仍然无法实现它。有人可以帮我吗？[![在此处输入图像描述][1]][1] [1]：https://i.stack.imgur.com/ZJlqW.png

这是我截取的代码：

<div id="chart"></div>
<script src="apexcharts.js"></script>
<script>
var typeStr = 'column';
var options = {
        series: [
      {
        name: 'acts number',
         type: typeStr,
    data: [0, 0, 0, 8, 10, 45.6, 0, 0, 0, 0, 0, 0]
  },
  {
    name: 'cost',
    type: typeStr,
    data: [0.0, 0.0, 0.0, 25.5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
  }],
  chart: {
    height: 350,
    type: 'line',
    stacked: false,
    toolbar: {
        show: false
      },
    zoom: {
        enabled: false …

每当有人点击我的图表或其中一个栏时，我需要触发一个事件，但由于某种原因，事件不会为我触发。

这是我的代码：

<apexchart type="rangeBar" :options="chartOptions" class="ganttChart" :series="series"></apexchart>

我的设置：

setup() {
 const series = [
            {
              name: 'Sunny',
              data: [
                {
                  x: 'Weather',
                  y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-08').getTime()
                  ]
                },
              ]
            },
            {
              name: 'Rainy',
              data: [
                {
                  x: 'Weather',
                  y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-05').getTime()
                  ]
                },
              ]
            }
          ];

  const chartOptions = {
            chart: {
                events: {
                    click: function(event, chartContext, config) {
                        alert(event, chartContext, config);
                    }
                },
              height: 400,
              width: 400,
              type: 'rangeBar',
              
            },
            plotOptions: {
              bar: { …

我在一个项目中使用 ApexChart，我想为每个条形图设置不同的颜色。我将数据数组和颜色数组传递给组件，根据颜色数组索引，相关数据栏应该着色。

当前的实现如下，我厌倦了 color: 方法，但它只获取颜色数组的第一种颜色。

const options: ApexOptions = {
    chart: {
        height: 200,
        type: 'bar',
        offsetY: 16,
        toolbar: {
            show: false,
        },
    },
    plotOptions: {
        bar: {
            horizontal: true,
            barHeight: '85%',
        },
    },
    dataLabels: {
        enabled: false,
    },
    xaxis: {
        position: 'top',
    },
    yaxis: {
        show: false,
    },
    grid: {
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },  
    },     
};

const series = [
    {
        data: exampleChartData.data || [],

    }
];

return (
    <Chart
        options={options}
        series={series} …

如何更改 Apexcharts 中项目栏的最大宽度/高度？（https://apexcharts.com/）

我有一个水平条形图，其数据是动态加载的，并且用户（项目）的数量各不相同。当用户很少或只有一个时，栏看起来非常大，我想将高度设置为最大 50px。

代码：

    var timeChart = {
            formatter: function (value) {
              var v = formatFromSeconds(value);
              return v;
            }
          };    
    var desv_time = function (value) {
      var v = formatFromSeconds(value);
      if (value>0)return "+"+v;
      else return v;
    }

    //CHART
    var chart1 = new ApexCharts( document.querySelector("#chart-desv"),
    {
      chart: {
          id: 'chart1',
          type: 'bar'
      },
      plotOptions: {
          bar: {
            horizontal: true,
          },
      },
      dataLabels: {
        enabled: true,
        formatter: desv_time,
        style: {
          colors: ["#000"]
        }
      },
      series: [],
      xaxis: {labels: …

我正在使用 ApexChart，我想向工具提示添加一些更多信息（悬停时显示）。我已阅读文档，但我真的不明白如何做到这一点。

我的问题是我不明白应该在哪里添加额外数据以及如何使其显示在工具提示中？

现在我只能在工具提示中看到默认值，即系列名称和“y”值。我想看看：

\n
• 价格：（x 价值）
\n
• 数量：（y 值）
\n
• 产品名称\'，
\n
• 信息：\'信息\',
\n
• 站点：\'名称\'
\n

如何将其添加到工具提示中？这是我到目前为止得到的：

小提琴： https: //jsfiddle.net/9m0r2ont/1/

代码：

var options = {\n  chart: {\n    height: 380,\n    width: "100%",\n    type: "scatter",\n  },\n  series: [\n    {\n      name: "Series 1",\n      data: [\n        {\n          x: 100,\n          y: 50,\n          product: \'name\',\n          info: \'info\',\n          site: \'name\'\n        },\n        {\n          x: 150,\n          y: 55,\n          product: \'name\',\n          info: \'info\',\n          site: \'name\'\n        }\n      ]\n …