标签: apexcharts

我想隐藏使用 ApexCharts.js 制作的图表中的一些标签。我来自 Frapp\xc3\xa9 Charts，它有一个称为“连续性”的功能。如果标签不合适，它允许您隐藏标签，因为该图表是时间序列图表。

我的 ApexChart 看起来像这样：

我想删除许多日期，但仍然让它们出现在工具提示中。我能够在 Frapp\xc3\xa9 图表中执行此操作，它看起来像这样：

这是我的 Apex 图表代码：

        var options = {\n            chart: {\n                animations: { enabled: false },\n                toolbar: { show: false },\n                zoom: { enabled: false },\n                \n                type: \'line\',\n                height: 400,\n                fontFamily: \'PT Sans\'\n            },\n            stroke: {\n                width: 2\n            },\n            theme: {\n                monochrome: {\n                    enabled: true,\n                    color: \'#800000\',\n                    shadeTo: \'light\',\n                    shadeIntensity: 0.65\n                }\n            },\n            series: [{\n                name: \'New Daily Cases\',\n                data: [2,0,0,0,0,0,0,1,0,1,0,7,1,1,1,8,0,11,2,9,8,21,17,28,24,20,38,39,36,21,10,49,45,44,52,74,31,29,43,28,39,58,30,47,50,31,28,79,39,54,55,33,42,39,41,52,25,30,37,26,30,35,42,64,46,25,35,45,56,45,64,34,34,32,40,65,56,64,55,37,61,51,70,81,76,64,71,61,56,52,106,108,104,33,57,82,71,67,68,63,71,32,70,65,98,52,72,87,66,85,90,47,164,123,180,119,85,66,122,65,155,191,129,144,175,224,234,240,128,99,141,131,215,228,198,152,126,201,92,137,286,139,236,238,153,170,106,61]\n            }],\n …

当用户按下链接时，我有一个 ApexChart 动态加载。一旦按下链接，就会有一个后端进程将数据加载到图表中。然而，一旦发生这种情况，页面就会由于某种原因自动滚动到顶部。似乎有一个相关的错误不久前被关闭，但我不确定它的相关性如何。

如何防止加载时滚动到顶部？

这是我的图表配置：

export class UserChart extends React.Component {
  
  state = {
    series: this.props.data,
    options: {
      chart: {
        height: 350,
        type: "bar",
        background: '#FFF',
        zoom: {
          enabled: false
        },
        toolbar: {
          show: false,
        },
      },
      noData: {
        text: "Unavailable"
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        width: [1, 1, 4]
      },
      title: {
        text: this.props.title,
        align: 'center',
        
      },
      xaxis: {
        categories: this.props.xaxis,
        tooltip: {
          enabled: false
        }
      },       
    

      yaxis: [
        {
          axisTicks: {
            show: true, …

我使用ApexCharts渲染一个简单的折线图。现在我想删除该图表周围的填充。我确实希望两个轴上都有标签，但这些标签和图表边框之间不应有更多间距。

您可以在这里明白我的意思 - 我不希望 Y 轴上“Fehler”左侧的间距，也不希望 X 轴上“Tage”下方的间距：

我用这个选项尝试过：

    grid: {
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },  
    },

但是，这并没有为我解决这个问题。在该部分中
启用也没有帮助。sparkline: truechart

还有其他想法吗？

我是反应初学者。我正在尝试获取数据库中已打开、已处理和待处理票证的数量。因此，我使用了 Axios，并从数据库中获取数据，从中计算打开、待处理和已处理的票证数量。这些基于圆环图的值。我试图将甜甜圈聊天图例标签重命名为“打开”、“已处理”和“待处理”，但它没有被重命名。我得到的输出是： 也就是说，仅显示“系列 1、系列 2、系列 3”等默认名称。如何重命名上述图例标签。

import React, {Component} from "react";
import GridWrapper from "../helpers/gridWrapper";
import Chart from 'react-apexcharts'
import ContentWrapper from "../helpers/contentWrapper";
import GridWrapperL from "../helpers/twoSideBySideWrapper/gridWrapperL";
import axios from "axios";


export default class Charts extends Component{
 


  constructor(props) {
    super(props);

    this.state = {
      options: {
        chart: {
          id: 'apexchart-example'
        },
      },
      series: [10,20,30]
    }
  }
  async componentDidMount(){
    const salary=[]; const age=[]; var Pending=0; var Open=0; var Handled=0;
    await axios.get('http://localhost:5000/tickets').then (Response=>{
     console.log("Response" , Response.data.ticket);
     const data=[] = Response.data.ticket;
     const emp_name=[];
     const …

我将 Apex Charts 与 Vue 3 一起使用。当图表渲染（绘制）时，它会渲染两次。奇怪的是，当我调整大小或移动浏览器窗口时，第二个图表就会从 DOM 中删除。我还仔细检查了我的 Vue 组件，以确保我没有两次导入此图表组件。

<template>

<apexchart
  width="500"
  height="400"
  type="bar"
  :options="chartOptions"
  :series="series">
</apexchart>

</template>

<script>

import VueApexCharts from "vue3-apexcharts";

export default {
    name: 'ChartExample',
    components: {
        apexchart: VueApexCharts
    },
    data() {
        return {
            chartOptions: {
                chart: {
                    id: "vuechart-example",
                },
                xaxis: {
                    // categories loaded here
                },
            },
            series: [
                // data loaded here
            ],
        };
    },
    mounted() {
        this.series = [
            {
            name: 'precip',
            data: [1,2,3,4,5],
            }
        ];
        this.chartOptions.xaxis = {
            categories: [1,2,3,4,5], …

我一直在为这个问题苦苦挣扎，我需要 100% 的图形 height你的容器。

对于重量，我向他表明他的身高：“100%”仍然跟随着上下空格，tabiem 我给了false价值yaxis但问题仍然存在。

谁能解决它会很感激。

var options = {
  chart: {
    type: 'line',
    width: '100%',
    height: '100%',
    toolbar: {
      show: false
    },
  },
  grid: {
    show: false,
    padding: {
      left: 0,
      right: 0
    }
  },
  tooltip: {
    intersect: false,
    x: {
      show: false
    },
    marker: {
      show: false
    }
  },
  dataLabels: {
          enabled: false
        },
  yaxis: {
    show: false,
  },
  xaxis: {
    tooltip: {
      enabled: false
    },
    labels: {
      show: false
    },
    axisBorder: …

我有一组数据用于绘制折线图。我正在使用 ApexCharts。

let testData = [
  {
    cell_id: 5833307,
    datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
    rsrq: ["108", "108", "108", "108", "109"]
  },
  {
    cell_id: 2656007,
    datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
    rsrq: ["120", "119", "116", "134", "114"]
  }
];

let datasetValue = [];

for( let x=0; x<testData.length; x++ )
{
  datasetValue =
    { 
    chart: {
      height: 380,
      width: "100%",
      type: "line"
    },
    stroke: {
      curve: 'smooth',
      width: 1.5,
    },
    markers: …

当您单击条形图时，我希望禁用或至少找到如何修改 Apexchart 的条形图“选择着色器”。您可以在图像中看到所选的条会比其他条变暗。我想以此为基础（让它更暗或更亮）。我搜索了 ApexCharts 文档并尝试实现选择和其他一些，但没有运气：

我用 APEXCHARTS 制作了一个甜甜圈图表。它看起来像这样：

这是我的代码：

var options = {
          series: [44, 55, 41, 17, 15],
          labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'test'],
        chart: {
          type: 'donut',
          foreColor: '#ffffff'
        },
        grid: {
          borderColor: "#EF3252"
        },
        plotOptions: {
          pie: {
            expandOnClick: false
          }
        },
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: '100%'
            },
            legend: {
              position: 'bottom'
            }
          }
        }],
        datasets: [{
          borderColor: ["#EF3252"]
        }]
        };

   var chart = new ApexCharts(document.getElementById("stats1_chart1"), options);
   chart.render();

<div id="stats1_chart1"></div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

我想实现改变边框颜色。但我无法弄清楚这应该如何工作。
~马库斯

我有以下条形图配置。

const series = [
    {
      name: 'Net Profit',
      data: [18, 34, 55, 57, 80, 70],
    },
  ];
  const options = {
    chart: {
      type: 'bar',
      height: '50px',
      toolbar: {
        show: false,
      },
    },
    grid: {
      show: false,
      padding: {
        top: 0,
        bottom: 0,
      },
      xaxis: {
        lines: {
          show: false,
        },
      },
      yaxis: {
        lines: {
          show: false,
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '80%',
        barHeight: '100%',
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: …