标签: apexcharts

我正在尝试使用 Data URI 方法获取图表 URI。我见过很多使用 Apexchart Js从 ApexChart获取 pdf 的示例，当尝试在 React 上重现它时，我得到了 TypeError: Cannot read property 'type' of undefined

这是我的组件安装看起来像这样：

componentDidMount() {

console.log(this.state.loading);
if (this.state.loading === false) {
  const {options} = this.state;
  const node = ReactDOM.findDOMNode(this);
  if (node instanceof HTMLElement) {
    var chart = new ApexCharts(node.querySelector('.charty'), options);
    chart.render().then(() => {
      setTimeout(function() {
        chart.dataURI().then(uri => {
          console.log(uri);
        });
      }, 4000);
    });
  }
} else {
  return;
}
}

类型也在我的状态和渲染中定义，如下所示：

    <div className='rfe'>
      <div className='rfea'>
        From {this.state.AxisMonth[0]} to{' '}
        {this.state.AxisMonth[this.state.AxisMonth.length - …

我正在使用顶点条形图，我想在条形图上垂直显示值，但它是水平显示的。我进行了大量搜索以垂直显示价值，但没有找到任何解决方案。请帮我解决这个问题。我也分享代码。

这是图表的脚本：

 <script type="text/javascript">


$(document).ready(function() {
// custom datalabelBar
     var options = {
    chart: {
        height: 350,
        type: 'bar',
        toolbar: {
            show: true
        }
    },
    plotOptions: {
        bar: {
            horizontal: false,
            dataLabels: {
                position: 'top',
            },
        }
    },
    dataLabels: {
        enabled: true,
        position: 'top',
        formatter: function (val) {
        return val ;
      },
        horizontal: true,
        offsetX: 0,
        style: {
            fontSize: '10px',
            colors: ['#000']
        }
    },
    stroke: {
        show: false,
        width: 1,
        colors: ['#fff'],
        lineCap: 'round',
        curve: 'smooth',
    },
    series: [{
        name: …

我很难更改条形图中条形的颜色以适应我的网站主题。我去了 youtube 并观看了以下视频https://www.youtube.com/watch?v=Cw87VN7K1Ek 并尝试了他们的解决方案来改变颜色，但没有成功。我想寻求您的帮助，以了解我可能出错的地方或必须对我的代码进行更改才能成功显示新颜色。以下是配置条形图的代码片段：

constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      },
      fill: {
        colors: ['#f00']
      }
    };
  }

结果如下，图表的颜色仍然是ApexCharts的默认颜色

我还想在选择时更改条形图中特定条形（数据点）的颜色。我浏览了以下链接：https://apexcharts.com/docs/options/states/，但这只会改变阴影，但我喜欢改变颜色，但似乎没有找到任何资源来做到这一点。如果您以前经历过以下情况并成功改变它，我将不胜感激。

我有一个显示用户体重的图表，我想在用户想要达到的特定体重处添加一条水平线（目标线）。

ApexCharts 有这个选项吗？

可以使用服装格式吗？我的图表适用于 $ 日期：

jQuery(document).ready(function() {
var downloaded = [28683,62977,94111,146146,177601,200647,205921];
var viewTitle = '{if $currentLocale == 'en_US'}Example{else}Example{/if}';
var downloadTitle = 'Example';
var labelconvert = function(value) {
var val = Math.abs(value); if (val >= 1000) { val = (val / 100) + " K";} return val;};
var options= {
  chart:{
     toolbar:{show:!1},
     height:200,
     type:"area",
series:[{name:viewTitle,data:viewed},{name:downloadTitle,data:downloaded},],
yaxis:{show:1,labels:{formatter:labelconvert,},title:{text:xTitile,style:{fontSize:'12px',fontWeight:'bold',fontFamily:'Roboto',color:'#113060'}}},

我想显示百分比而不是整数。现在，当鼠标悬停在图表的数据点（工具提示）上时，它只是将值显示为整数。

我想我需要在格式化程序公式中设置如下：

let test = value / SUM(all_values)
return test.toFixed(0) + '%'

但是，我在他们的文档中找不到它，我找到的最好的是这个，它总是为我提供 100% 的每个数据点：

    tooltip: {
      y: {
        formatter: function(value, opts) {
                let percent = opts.w.globals.seriesPercent[opts.seriesIndex][opts.dataPointIndex];
                return percent.toFixed(0) + '%'

        }
      }
    }

我正在使用 Django 进行我的项目，我需要使用 Javascript 和图表库。我有两个用 ApexCharts 制作的图表，但我不知道如何防止标签文本倾斜和溢出。我在文档中找不到有关此问题的任何内容，或者我不够熟悉，无法找到我需要的内容。:)\n

var options07 = {\n        series: [{\n        name: \'SOHA\',\n        data: [ {{i.szervkult07a}} ]\n        }, {\n        name: \'RITK\xc3\x81N\',\n        data: [ {{i.szervkult07b}} ]\n        }, {\n        name: \'ID\xc5\x90NK\xc3\x89NT\',\n        data: [ {{i.szervkult07c}} ]\n        }, {\n        name: \'GYAKRAN\',\n        data: [ {{i.szervkult07d}} ]\n        }, {\n        name: \'MINDIG\',\n        data: [ {{i.szervkult07e}} ]\n        }],\n        chart: {\n        type: \'bar\',\n        height: 350,\n        stacked: true,\n        stackType: \'100%\'\n        },\n        responsive: [{\n        breakpoint: 480,\n        options: {\n            legend: {\n            position: \'bottom\',\n            offsetX: -10,\n            offsetY: 0\n            }\n        }\n …

我已经在这件事上苦苦挣扎了好几个小时，似乎无法弄清楚任何事情，在这件事上拉扯我的头发。

这是我的图表数据

var options = {
                chart: {
                    height: 350,
                    type: 'area',
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth'
                },
                colors: ["#FFB64D", "#FF5370"],
                series: [{
                    name: 'series1',
                    data: [0.3333333333333333, 0.5, 0.6, 0.5714285714285714]
                }],

                xaxis: {
                    type: 'datetime',
                    categories: [1641535200, 1641621600, 1641708000, 1641794400],
                },
                        }

            var chart = new ApexCharts(
                document.querySelector("#area-chart-1"),
                options
            );

            chart.render();

这是我的图表

我似乎不明白为什么日期不能正确反映

我还尝试了以下代码，我已通过在线纪元计算器确认这确实是我正在寻找的日期，每天一个时间戳，每个时间戳一个值。

var options = {
                chart: {
                    height: 350,
                    type: 'area',
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth'
                }, …

我正在使用apexcharts.js。我在我的页面上使用以下代码。我有两个问题

1. 如何改变y轴步长值？截至目前，正在讨论20。

2. 在工具提示中，我没有得到字符串。它只是显示数字。

var options = {
  series: [{
    data: ["30 lac", "40 lac", "35 lac", "50 lac", "49 lac", "60 lac", "70 lac", "91 lac", "125 lac"]
  }],
  chart: {
    height: 350,
    type: 'bar',
    events: {
      click: function(chart, w, e) {
        // console.log(chart, w, e)
      }
    }
  },
  //colors: colors,
  plotOptions: {
    bar: {
      columnWidth: '45%',
      distributed: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  legend: {
    show: false
  },
  xaxis: {
    categories: [10, 20, 30, 40, …

如何使钢筋变粗？

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

 const series = [44, 55, 41, 17, 15];
 const options = {
 chart: {
 type: "donut"
 }
 };

 export default function PieChart() {
 return (
  <div>
  <Chart options={options} series={series} type="donut" height={300} />
  </div>
 );
 }

*此处的沙箱示例https://codesandbox.io/s/vigilant-pateu-tv4t5q?file=/src/App.tsx *