标签: apexcharts

我在 nuxt 中使用顶点图表
并在我的代码中应用插件，
这在开发模式下工作

cross-env NODE_ENV=development HOST=0.0.0.0 PORT=3000 nodemon server/index.js --watch server

但不在构建源中工作

nuxt build && cross-env NODE_ENV=production HOST=0.0.0.0 PORT=80 node server/index.js

这是我的代码

plugins/vue-apexchar.js

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'

Vue.component('VueApexCharts', VueApexCharts);

nuxt.config.js

plugins: [
    { src : '~/plugins/vue-apexchart.js', ssr : false },
],
build: {
  vendor : [
     'vue-apexchart'
  ]
}

周图表.vue

<VueApexCharts max-width="300" type="area" :options="chartOptions" :series="series"></VueApexCharts>

这些代码在开发模式下工作但不能工作构建文件
我需要你的帮助来解决这个问题
请帮助我
这是我的源代码> https://github.com/zoz0312/Nuxt_Blog

我正在使用 apexcharts 中的热图图表，我想自定义工具提示。对于每个数据，我想以字符串形式提供匹配的描述。描述值存储在一个简单的数组中，如下所示：

let chartLabels = ['January', 'February', 'March'];

如何使用custom图表选项中的字段为数据字段提供自定义工具提示？

图表数据：

let chartData = {
    options: {
        chart: {
            toolbar: {
                show: false
            },
        },
        yaxis: {
            show: false
        },
        xaxis: {
            show: false,
            labels: {
                show: false,
            }
        },
        tooltip: {
            enabled: true,
            //custom:
        },
     },
     series: [{
        name: ' ',
        data: [24, 53, 54, 545, 545]
      },
        {
            name: ' ',
            data: [654, 454, 454, 44, 34]
        }]
};

<Chart
    options={chartData.options}
    series={chartData.series}
    type='heatmap'/>

我目前正在使用 ApexChart 来显示折线图。

问题：
我想知道是否有办法设置固定轴标签值。

我的研究努力

例如：
假设我想要一个折线图，显示 24 小时内每小时的一些计数，并在 x 轴上的 [00:00, 06:00, 12:00, 18:00] 小时标记处显示刻度（这部分就是我想要的）。

所以我们的图表将有 24 个数据点 [00:00, 01:00, ..., 23:00]。每小时一次。
x 轴上有时间 (hh:mm)。
在 y 轴上我们有计数。

如果我只是简单地插入数据集，我会得到如下所示的图表。
如您所见，ApexCharts 自动设置 x 轴刻度值。

遗憾的是，这不是我想要的...设置tickAmount也没有得到我想要的结果，因为ApexChart只是将范围（在本例中为0-23）除以tickAmount来获得其刻度。遗憾的是，无法通过划分轴来获得我想要的结果。

我还认为我可以将 x 轴类型设置为类别并仅显示每个第 n 个标签，但该选项似乎也不存在。

以下是我传递给 apexcharts 的选项

const options = {
  chart: {
    type: 'line',
  },
  series: {
    name: 'count',
    data, // data as type [number, number][], first number is date, second number is count. 24 data points. one for every hour. …

我正在使用 apexcharts 和 vue。我希望迷你图占据其父级宽度的 100%。

这就是我所做的：

<div>
  <apexchart
    :options="chartOptions"
    :series="series"
    height="150"
    style="width: 100%"
  />
</div>

我还尝试将宽度设置为组件的支柱，但其行为相同。

这是我的图表选项：

chartOptions: {
   chart: {
       type: 'area',
       sparkline: {
           enabled: true
       }
   },
   dataLabels: {
       enabled: false
   },
   stroke: {
       curve: 'straight',
       width: 3,
   },
   xaxis: {
       type: 'datetime',
   }
}

所以这里没什么特别的，它是从 apex 仪表板示例复制的，我添加的唯一内容是尝试将宽度设置为 100%。

它溢出了它的父级（绿色）和父级容器（黄色），如下所示：

而且当我调整窗口大小（不刷新）时，它不会保留其大小，它会变得比父窗口小：

如何让它填充其父级（绿色容器）的宽度并保持这种状态（响应式）？

谢谢

我花了一天时间解决这个问题，但找不到解决方案。如果有人可以帮忙的话请。

所以我在 React 中制作了一个加密货币跟踪器。我设法创建了一个显示多种货币的表格，以及一个列，我在其中根据已保存在 javascript 文件中的 JSON 数据呈现各种货币的 Apexchart，即我没有对 API 进行任何调用来获取数据。我已经有了静态数据。我只是以表格的形式呈现静态数据。

现在的问题是页面的加载时间。由于我需要渲染所有货币的 apexcharts（我总共显示 100 种），显示它们会降低用户体验。

为了改善用户体验，我想添加占位符文本“正在加载...”，只有当 apexchart 加载完成后，我才想显示图表。

下面是我的图形组件，负责加载我的 apexchart。

import Chart from 'react-apexcharts';
import { ChartData } from '../data/ChartData';

class Graph extends Component {
  state = {
    options: {
      stroke: {
        width: 1.7,
      },
      grid: {
        show: false,
      },
      datalabels: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
      chart: {
        animations: {
          enabled: false,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      yaxis: …

我正在使用Apexcharts 树状图并想要应用不同的颜色。

如果 type 数据是“a”类型，我想要一种颜色，如果数据是“b”类型，我想要另一种颜色。

我的数据：

    const TreeData = [
          {
            data: [
              {
                x: 'Product 1',
                y: 218,
                type:'a'
              },
              {
                x: 'Product 2',
                y: 149,
                type:'b'
              }]
    

我尝试过这样的事情：

    colors: [function({ value, seriesIndex, w }) {
        if (value < 55) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }, function({ value, seriesIndex, w }) {
        if (value < 111) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }]
    

但我无法在上述函数中获取类型值。

如何使用不同的颜色？

我正在使用 ApexCharts 中的条形图。水平 x 轴有项目数。当数字太低（例如 1、2）时，轴会显示没有意义的中间十进制值。如何强制轴仅以整数间隔显示整数值，如第二个图像中所示。Vue模板

        <apexchart
          ref="ratingChart"
          width="450"
          height="250"
          :options="ratingData.options"
          :series="ratingData.series"
        ></apexchart>

JavaScript

data: function () {
    return {
      ratingData: {
        options: {
          chart: {
            id: "item-rating",
            type: "bar",
          },
          title: {
            text: "Item by Rating",
            align: "center",
            margin: 10,
            offsetX: 0,
            offsetY: 0,
            floating: false,
            style: {
              fontSize: "14px",
              fontWeight: "normal",
              fontFamily: "Arial",
              color: "#595959",
            },
          },
          noData: {
            text: "Loading...",
          },
          xaxis: {
            categories: ["Very High", "High", "Medium", "Low", "Eliminated"],
            type: "category",
            tickPlacement: "on",
            labels: {
              rotate: …

我使用react-apexcharts来制作下面的图表，我需要显示图表的最小视图，所以我隐藏x、y轴、图例、网格和所有内容，但底部的这个栏没有隐藏。我在文档中找不到正确的选项！有什么办法可以隐藏这个吗？

这是我得到的当前输出！

const ProductivityGraph = () => {
  const series = [{
    name: 'Series A',
    data: [23, 24, 25, 15, 25, 28, 38, 46],
  },
  {
    name: 'Series B',
    data: [20, 29, 37, 36, 44, 45, 50, 58],
  },
  ];
  const options:any = {
    chart: {
      toolbar: { // Hamburger menu at top
        show: false,
      },
      height: 350,
      type: 'line',
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
      width: 2,
    }, …

我在角度项目中使用 Apex 图表，我在那里实现了时间序列图表，但无法减少折线图中的“线条粗细”。

这是我的配置。

  public initChartData(): void {
  this.series =  this.response_data['data']
  this.chart = {
    type: "area",
    stacked: true,
    height: 350,
    zoom: {
      type: "x",
      enabled: true,
      autoScaleYaxis: false
    },

    toolbar: {
      autoSelected: "zoom",
      show: true,
      tools: {
      zoomin: false,
      zoomout: false,
    }
    },

  },

  this.dataLabels = {
    enabled: false
  };
  this.markers = {
    size: 0
  };
  this.stroke ={
    width: 1,
    curve: 'smooth',
  },

  this.fill = {
    type: "gradient",
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 90, 100] …

最初我在使用 Angular SSR 时遇到了这个包的问题，​​因为我在导入时遇到了这个错误Window is not defined

server.ts但是，您可以通过以下方式模拟它：

const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
global.window = mock.getWindow();

我现在收到标题中所述的错误，SVG 未定义。有什么办法可以嘲笑这个吗？

https://github.com/svgdotjs/我相信它在幕后使用

谢谢