标签: apexcharts

我正在使用react-apexcharts，并且希望在用户单击其中一个部分后在饼图上添加一个事件。这是我的图表：

<div className="pie">
    <Chart options={{
        labels: [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ],
        theme: {
            monochrome: {
                enabled: false
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: "100%"
                },
                legend: {
                    show: false
                }
            }
        }]
    }}
    colors={["#1B2260"]}
    series={[44, 55, 41, 17, 15]}
    labels={["Apple", "Mango", "Orange", "Watermelon"]}
    type="pie"
    width="300" />
</div>

当用户单击“Apple”部分时，我想打印“Apple”。这是我能为点击事件找到的最好的文档，但我无法让它工作。

任何帮助都会很棒！谢谢

在我的Python中

  2020-09-23T10:50:46.838023 

在 JavaScript 中

  2020-09-23T10:50:46.838023

JavaScript apexcharts 格式

  2020-09-23T03:50:46.838023

为什么把时间从 10 点改为 03 点？

这是我的 Vue 代码

chartOptions: {
              chart: {
                id: "chart" + key,
                type: obj.chart,
                zoom: {
                  enabled: false,
                },
              },
              tooltip: {
                x: {
                  format: 'dd/MMM HH:mm:ss',
                }
              },
              xaxis: {
                type: "datetime",
                categories: obj.time,
                labels: {
                  show: true
                }
              },
            },
          };

我的obj对象是用于foreach循环的。

我正在用这样的“日期值对”填充一个系列：

series: [{
                      name: "Price",
                      data:[
                        [1486684800000, 38],
                        [1486771200000, 0],
                        [1486857600000, 0],
                        [1486944000000, 0],
                        [1487030400000, 0],
                        [1487116800000, 58]]
                    },

但是，例如，当我用“缺失日期”填充系列数组时，如下所示：

series: [{
                      name: "Price",
                      data:[
                        [1486684800000, 38],
                        [1487116800000, 58]]
                    },

ApexCharts 将自动填充该行，并且不会用零值填充缺失的日期。

关于如何强制 ApexCharts 显示零值的缺失日期而不是“忽略”它们有什么想法吗？

如何从热图 apexcharts 中的 x 轴标签中删除重复项此处 JSFiddle 链接 请点击此处

这里显示了多个 5 月月份，我只需在 4 列中间显示一个。我尝试了下面的

xaxis: {
           labels: {showDuplicates: false}
         }

但这并没有按预期工作。

我正在使用该库apexCharts在我正在处理的项目中构建一些图表。

这个特定的饼图正在加载某个操作的尝试次数，并将其显示在侧栏标签中。

最近我加载了一个包含很多尝试的图表，并且容器获得了滚动，我认为它会加载所有尝试，并且通过滚动您可以浏览它们，但它并没有显示所有尝试。

我一直在观察图表的响应行为，在 1300px > 分辨率大小下，它确实通过滚动显示了所有标签。

这些是我的顶点图表代码的选项：

chartOptions: {
  chart: {
      width: '100%',
      height: 390,
      type: 'pie',
      toolbar: {
          show: true
      }
  },
  labels: chartData.labels,
  legend: {
      markers: {
          width: 26,
          height: 12,
          radius: 8,
      },
      position: chartOptions.legendPosition || "right",
  },
  theme: {
      monochrome: {
          enabled: true,
          color: '#537F23',
      }
  },
  title: {
      text: chartOptions.title,
      margin: 10,
      style: {
          fontSize:  chartOptions.titleSize || '25px',
          fontWeight:  'bold',
          color:  '#707070'
      },
  },
  responsive: [
      {
        breakpoint: 1400,
        options: {
              chart: …

我在ts中使用了这段代码

export type pieChartOptionss = {
  series?: ApexNonAxisChartSeries | '';
  chart?: ApexChart | '';
  legend?: ApexLegend | '';
  dataLabels?: ApexDataLabels | '';
  responsive?: ApexResponsive[] | '';
  labels?: any | '';
};
export class DashboardComponent implements OnInit {
 public pieChartOptionss!: Partial<pieChartOptionss>;
}
     (response: any) => {
          this.user_data = response.results;
          console.log('user_data', this.user_data)
          this.user_data_true = this.user_data.filter(x => x.is_active === true)
          this.user_data_false = this.user_data.filter(x => x.is_active === false)
          this.pieChartData = [this.user_data_true.length, this.user_data_false.length];
          this.pieChartOptionss = {
            series: [this.user_data_true.length, this.user_data_false.length],
            chart: {
              type: 'donut',
              width: 270, …

我一直在尝试自动定义和设置 Apexchart y 轴上的最小值。它适用于单个 y 轴，但是一旦添加第二个轴，最小值就会设置为 0。在下面的示例中，我在控制台中记录最小值和最大值。

这可能是图表库中的一个错误，但我想知道是否有任何解决方法。如果我手动设置最小值，则效果很好。

代码笔：https://codepen.io/Kogelet/pen/rNmMgJE?editors =1111

console.clear();

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "line"
  },
  series: [
    {
      name: "Series 1",
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "Series 1",
      data: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110]
    }
  ],
  yaxis: [
    {
      opposite: false,
      min: (min) => {
        console.log('Min:', min);
        return min; 
      },
      max: (max) => {
        console.log('Max:', max); …

这是我的脚本选项，使用 apexcharts 图表

还有我的剧本

                var options = {
                    series: [{
                        name: 'Profit',
                        data: [{"x":"2021-08-29","y":0.23},{"x":"2021-08-30","y":-5.29},{"x":"2021-08-31","y":-0.02},{"x":"2021-09-01","y":5.38},...
                    }],
                    chart: {
                        type: 'area',
                        height: 350,
                        zoom: {
                            enabled: false
                        },
                        toolbar: {
                            show: false
                        }
                    },
                    stroke: {
                        show: true,
                        curve: 'smooth',
                        lineCap: 'butt',
                        width: 2
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.45,
                            opacityTo: 0.9
                        },
                    },
                    plotOptions: {
                        area: {
                            colors: {
                                ranges: [
                                    {
                                        from: -100,
                                        to: 0,
                                        color: "#e85347" // Red color
                                    },
                                    {
                                        from: 0,
                                        to: …

我正在使用 apexcharts 并做出反应。我需要隐藏一系列，但我不知道如何在我的代码中实现这些方法。这个想法是使用 data4 进行一些计算并将其显示在自定义工具提示上。如何隐藏图表中的数据4但仍在后台使用数据？

我的代码是这样的

import Chart from 'react-apexcharts'
import React from 'react';

class ApexChart1 extends React.Component {
 constructor(props) {
   super(props);
   
   this.state = {
          series: [{
            name: 'Data1',
            data: this.props.data.map(d=>{return +d.data1})
          }, {
            name: 'data2',
            data: this.props.data.map(d=>{return +d.data2})
          }, {
            name: 'data3',
            data: this.props.data.map(d=>{return +d.data3})
          }, {
            name: 'data4',
            data: this.props.data.map(d=>{return +d.data3})
          }],
    options:
     {...,
      tooltip: {
              // console.log()
              custom: function({series, seriesIndex, dataPointIndex, w}) {

                // Here I want to use the data4 series but hide that data when …

我想让我的甜甜圈图项目的角变圆，请指导

我想要的是

我做了什么

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

 const series = [54, 45];
  const options: ApexCharts.ApexOptions = {
    chart: {
      width: 380,
      type: 'donut',
    },
    labels: ['Active Users', 'Inactive Users'],
    plotOptions: {
      pie: {
        expandOnClick:false, 
        donut: {
          size:'85%',
          labels: {
            show: true,
            name: {
              show: true,
              fontSize: '12px',
              fontWeight: '400',
              color: '#6E7191'
            },
            value: {
              show: true,
              fontSize: '22px',
              fontWeight: '600',
              color: '#2E285C'
            },
            total: {
              show: true,
              color: '#BCC1C8',
              fontWeight: 600,
            }
          }
        } …