标签: apexcharts

我在角度项目中使用 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/我相信它在幕后使用

谢谢

我想从中删除号码33，我希望它只显示series-4

如何将其隐藏在工具提示中？

我正在使用jest和testing-library/react编写单元测试。在此之前，我从未编写过任何单元测试。编写测试后，我收到类似这样的错误。

 FAIL  src/__test__/components/Barchart.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    Call retries were exceeded\n\n      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)\n\nnode:internal/process/promises:245\n          triggerUncaughtException(err, true /* fromPromise */);\n          ^\n\n[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: r.node.getBBox is not a function".] {\n  code: 'ERR_UNHANDLED_REJECTION'\n}\nnode:internal/process/promises:245\n          triggerUncaughtException(err, true /* fromPromise */);\n          ^\n\n[UnhandledPromiseRejection: This error originated either by throwing …

我正在尝试在 React/Typescript 项目上实现一个简单的 ApexChart，但是，我遇到了以下类型错误：

没有重载与此调用匹配。
  重载第 1 个（共 2 个）“(props: Props | Readonly): ReactApexChart”，出现以下错误。
    类型 '{ 图表：{ 高度：ApexOptions; 类型：ApexOptions；缩放：{启用：ApexOptions; }; }; }' 不可分配给类型“ApexOptions”。
      “chart.height”的类型在这些类型之间不兼容。
        类型“ApexOptions”不可分配给类型“string |” 数量 | 不明确的'。
          类型“ApexOptions”不可分配给类型“number”。
  重载 2 个（共 2 个）“(props: Props, context: any): ReactApexChart”，出现以下错误。
    类型 '{ 图表：{ 高度：ApexOptions; 类型：ApexOptions；缩放：{启用：ApexOptions; }; }; }' 不可分配给类型“ApexOptions”。

我确实像往常一样安装了react-apexcharts和apexcharts。这是我的图表的脚本：

任务图表.tsx

import ReactApexChart from 'react-apexcharts';

const TasksChart: React.FC<Props> = ({
tasks,
}) => {

  const options = {
    chart: {
      height: 350,
      type: 'line',
      zoom: {
        enabled: …

首先 - 我对编程比较陌生。对此感到抱歉。现在我的问题。

我们有一个来自 Apex 的面积图，每个轴大约有 11.000 个数据点。现在的问题是图表需要很长时间才能加载。即使更改范围，图表也需要很长时间才能再次展开。

我已经尝试过：动画已禁用 面积图 -> 折线图 Parkers 为 0 标签关闭

我发现了另一个网站，图表运行得非常流畅。这里有人有经验或者可以告诉我如何让图表运行得更顺畅吗？或者这根本不可能？

许多问候

我当时正在开发一个个人项目，我正在考虑使用 apexcharts，但是图像中显示的错误开始出现，如果我在图表组件中设置宽度和高度属性，它就会消失，如果我将站点放入，它也会消失正在生产中，但目前我正在研究布局的响应能力

export function Chart() {\n    const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });\n    const options: ApexOptions = {\n        chart: {\n            id: "chart",\n            background: "#030a4d8d",\n            fontFamily: "Roboto",\n            width: "auto",\n            height: "auto",\n            redrawOnWindowResize: true,\n            selection: {\n                enabled: false,\n            },\n            toolbar: {\n                show: false,\n            },\n        },\n        dataLabels: {\n            background: {\n                borderRadius: 10,\n            },\n            style: {\n                colors: ["#142085"],\n            },\n        },\n        colors: ["#7e838c", "#474d59", "#363b47"],\n        grid: {\n            show: false,\n        },\n        legend: {\n            fontFamily: "Roboto",\n        },\n        noData: {\n            text: "Nenhum dado …

我正在使用apexcharts vue绑定来绘制一些条形图。

至于说通过文档应该可以禁用通过设置显示工具栏：假所看到那里。

所以我做到了我的助手功能：

// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
  toolbar: { show:false },// docs says it should do the trick
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: { distributed: true, horizontal: true }
  },
  tooltip: {
    theme: "dark"
  },
  xaxis: {
    categories: labels,
    color: "white",
    labels: {
      style: {
        colors: ["white"]
      }
    }
  },
  yaxis: {
    labels: {
      style: {
        color: "white"
      }
    }
  } …

我正在为一个社会开发一个网站，我正在使用apexCharts.js，我想显示一个简单的饼图，但是当我显示它时，dataLabel 上的值是一个百分比。我不想将它们转换为值，当然当我们悬停饼图时会显示真实值。

我已经阅读了文档并搜索了 datalabels 选项。我的思路是：

formatter: function(val) { return val }

但它不起作用......所以我在github上和这里都没有找到解决问题的例子。

在我的脚本下面：

var options = {
  chart: {
    width: 650,
    type: 'pie',
  },
  labels: ['Date formation',
    'Date formation 1',
    'Date formation 2',
    'Date formation 3',
    'Nombre de jours restant ',
    'Nombre de formations restantes'
  ],
  series: [202, 80, 62, 250, 52, 30],
  /* this portion NEED custom ???? */
  formatter: function (val) {
    return val
  },
  title: {
    text: "Jours de formation produits ou plannifiés" …

我试图让 Apex 图表（在 Vue.js 中）也更新它们的标签。我使用以下示例作为基础：

https://apexcharts.com/vue-chart-demos/pie-charts/update-donut/

我做了一个非常基本的图表来演示这个问题。它在开始时有数据项和 3 个标签。更新按钮连接到更新事件。当您单击它时，数据会发生变化，但标签不会。都试过 - 直接设置：

this.chartOptions.labels = [] ...

并使用 vue 机制：

this.$set(this.chartOptions, "labels", ["d", "e", "f"]);

不过，他们似乎都没有改变标签。

这是它的代码笔：https : //codesandbox.io/s/vue-basic-example-z72rk?fontsize=14&hidenavigation=1&theme=dark

<template>
  <div class="example">
    <label>{{updated}}</label>
    <apexcharts width="300" height="300" type="donut" :options="chartOptions" :series="series"></apexcharts>
    <button v-on:click="changeChart">Update</button>
  </div>
</template>

    <script>
    import VueApexCharts from "vue-apexcharts";

    export default {
      name: "Chart",
      components: {
        apexcharts: VueApexCharts
      },
      data: function() {
        return {
          updated: "Not updated",
          chartOptions: {
            chart: {
              id: "basic-donut"
            },
            labels: ["a", "b", "c"]
          },
          series: [30, 40, …