标签: apexcharts

我在 HTML 中有以下代码（使用 Vue JS 和 Bootstrap 编码）：

<b-tabs card>
        <b-tab title="Followers" :title-link-class="'tab-title-class'">
              Page View graph here
        </b-tab>
        <b-tab title="Orders" :title-link-class="'tab-title-class'">
              Order Numbers graph here
        </b-tab>
        <b-tab title="Sales" :title-link-class="'tab-title-class'">
              <sales-analytics></sales-analytics>
        </b-tab>
        <b-tab title="Profit" :title-link-class="'tab-title-class'">
              Earning graph here
        </b-tab>
</b-tabs>

该卡片包含 4 个选项卡，其中一个名为“销售”，<sales-analytics></sales-analytics>是我创建的一个组件，用于使用 Vue-ApexCharts 库呈现图形。但是，该图表在选择选项卡时不会自动呈现。它只能在我在 Chrome 上单击 F12 后运行，重新加载页面也不起作用。

我认为该组件应该只在选择选项卡后运行，而不是在加载站点时完全运行（因为这会导致在站点加载时未选择选项卡时出现渲染问题）。有谁知道如何实现这一点？或者解决这个问题的替代方法？

脚本部分的更多内容：

<script>
   import Sales from '../analytics/Sales'

export default {
    components: {      
        'sales-analytics': Sales
}
</script>

编辑：经过相当多的谷歌搜索后，我发现了这个：https : //github.com/apertureless/vue-chartjs/issues/157 这与我的情况有非常相似的行为，我想 v-if 并安装加载选项卡被选中后的组件。有谁知道怎么做？

我想在 Apex Charts Stacked Column 中显示数据，每个系列都有特定的颜色（将产品 A 和产品 B 的颜色更改为红色和绿色）。默认顶点图表选择颜色。

我试图通过添加颜色选项并设置 plotOptions,bar,distributed: true 来更改颜色。但是随后孔列的颜色相同，并且堆叠的数据没有分开。

$(document).ready(function() {
  var options = {
    chart: {
      height: 350,
      type: 'bar',
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      }
    },
    responsive: [{
      breakpoint: 480,
      options: {
        legend: {
          position: 'bottom',
          offsetX: -10,
          offsetY: 0
        }
      }
    }],
    plotOptions: {
      bar: {
        horizontal: false,
      },
    },
    series: [{
      name: 'PRODUCT A',
      data: [44, 55, 41, 67, 22, 43]
    }, {
      name: 'PRODUCT …

我试图在工具提示（apexcharts）中显示折线图的 y 值。原始数据在{'8:50 AM', '11:00 AM', '9:02 AM'...}系列中以字符串格式设置，但它们显示为'8', '11', '9 '...在工具提示中，以数字格式四舍五入。我不明白为什么字符串数据会自行转换和舍入。我使用“toString”在工具提示格式化程序中显示全文（“8:50 AM”、“11:00 AM”、“9:02 AM”...），但它不起作用。有什么建议吗？

var spark1 = {
  chart: {
    id: 'sparkline1',
    type: 'line',
    height: 200,
    sparkline: {
      enabled: true
    },
    group: 'sparklines'
  },
  series: [{
    name: 'wake-up time',
    data: [{x: '05/06/2014', y:'8:50 AM'}, {x: '05/07/2014', y:'11:00 AM'}, {x: '05/08/2014', y:'9:02 AM'}, {x: '05/09/2014', y:'10:47 AM'}]
  }],
  tooltip: {
    x: {
      show: false
    },
    y: {
      formatter: function(value){
      return value.toString();
       }
    }
  }
 }
}

如何更新ApexCharts系列中的数据 我使用ApexCharts创建了以下Vue 组件。该组件从一堆这些组件所在的父级获取更新。更新后的值是通过 props 传入的。

<template>
  <div>
    <apexchart type="line" width="1000px" :options="options" :series="series"></apexchart>
  </div>
</template>

<script>
import Vue from 'vue';
import VueApexCharts from 'vue-apexcharts';

Vue.use(VueApexCharts);
Vue.component('apexchart', VueApexCharts);

export default {
  name: 'EnergyConsumption',
  props: {
    channel1: Number,
    channel2: Number,
  },
  data() {
    return {
      options: {
        chart: {
          id: 'vuechart-example',
        },
        xaxis: {
          categories: ['Channel 1', 'Channel 2'],
        },
      },
      series: [
        {
          name: 'series-1',
          data: [this.channel1, this.channel2],
        },
      ],
    };
  },
  methods: {
    updateSeries() …

我从 API 接收这样的数据

{
    "Bob Knight": 30774.72000002,
    "Samuel Herman": 10310.61000004,
    "Lucie Perry": 26308.41,
    "Andreas Smith": 8960.189999999999,
    "Frederic Smith": 2029.5000000599998,
}

我试图在我的 React 应用程序中使用顶点图表在条形图中显示它，但是我似乎无法以正确的方式格式化数据以使顶点显示任何内容。我试过在 javascript 中这样格式化：

{
    {x: "Bob Knight", y:"30774.720002"},
    ...
}

这似乎是文档建议的内容，但它没有呈现任何内容。以下是我的组件的有用部分

constructor(props) {
        super(props);
        this.state = {
            options: {
                chart: {
                    id: "basic-bar"
                },
                xaxis: {
                    type: 'category'
                }
            },
            values: []
        }
    }

    componentDidUpdate(prevProps) {
        if (!equal(this.props.selectedDate, prevProps.selectedDate))
        {
            var m = moment(this.props.selectedDate).format("M");
            var y = moment(this.props.selectedDate).format("YYYY");
            axios.get('http://localhost:8080/opportunity/owner/' + y + '/' + m)
                .then(res => { …

我在 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%。

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

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

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

谢谢

我已经尽力了。如果有人能帮助我，那就太好了。我希望图表上的数字和图例消失