Uncaught(inpromise)TypeError:ser[i].data.mapisnotafunctioninapexchart.js-有解無憂

當我嘗試從 json api 呈現頂點圖表時出現上述錯誤

圖表也未在其 div 中呈現

控制臺錯誤

Uncaught (in promise) TypeError: ser[i].data.map is not a function in apex chart.js

json api 鏈接
https://syed1ahmed.github.io/stage-gear/api.json

頂點圖表圖表配置

var ChartOptions = {
    series: [],
    noData: {
        text: 'Loading...'
    },
    chart: {
        type: 'bar',
        height: 300,

    },
    colors: 'blue',

    plotOptions: {
        bar: {
            horizontal: !1,
            dataLabels: {
                position: 'top',
            },
        }
    },
    dataLabels: {
        enabled: !1,
        offsetX: -6,
        style: {
            fontSize: '12px',
            colors: ['#fff']
        }
    },
    stroke: {
        show: true,
        width: 1,
        colors: ['#fff']
    },
    tooltip: {
        shared: true,
        intersect: false
    },
    yaxis: {
        forceNiceScale: true,
        labels: {
            show: false,

        }

    },
    grid: {
        show: true,
        borderColor: '#90A4AE',
        strokeDashArray: 0.5,
        position: 'back',
        xaxis: {
            lines: {
                show: false
            }
        },

        row: {
            colors: 'red',
            opacity: 0.2
        },

    },

    xaxis: {
        type : 'catagory',
        
        labels: {
            show: false,
            rotate: 180,
            
        }

    }

};

var chart = new ApexCharts(document.querySelector("#chart"), ChartOptions);
chart.render();


const url = 'https://syed1ahmed.github.io/stage-gear/api.json';

$.getJSON(url, function (response) {
    chart.updateSeries([{
        name: 'monthly Volume In USD',
        data: response
    }])

});

重現問題的代碼筆 https://codepen.io/syed1ahmed/pen/eYrmzPO

有人可以解決這個錯誤嗎

謝謝

uj5u.com熱心網友回復：

您不能只對資料做出整個回應，它必須采用 apexcharts 可以理解的形式。當您map像這樣將資料存盤到陣列時，圖表將呈現。

chart.updateSeries([{
    name: 'monthly Volume In USD',
    data: response.data.map((val) => val.volume)
}])

如果你想要categories updateOptions這樣的日期

chart.updateOptions({
  series: [
    {
      name: "monthly Volume In USD",
      data: response.data.map((val) => val.volume)
    }
  ],
  xaxis: {
    categories: response.data.map((val) => val.date)
  }
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/504590.html

標籤：javascript json 顶点图

上一篇：如何從.json檔案中獲取資訊

下一篇：chart.js僅顯示來自jsonapi回應的第一個x和y值