时间戳

首页 > 解决方案 > 从 JSON 映射数据不能很好地解析

javascript - 从 JSON 映射数据不能很好地解析

问题描述

我有一个 chart.js 程序，其数据格式如下：

"fieldData" : {
  "CategoryLFStat1" : "ACTE",
  "Category_LF_Stat2" : "DIAGNOSTIC",
  "Category_LF_Stat3" : "LABORATOIRE"
}

我的 JavaScript 函数

var list = data.filter(function (e) {
  return e.fieldData.categorie === prod
});

或者

var allProducts = data.map(function (e) {
  return e.fieldData.categorie
});

工作正常。

但是当我的 JSON 数据没有这样的fieldData标签时：

{
  "categorie" : "ACTE",
  "date" : "4/01/2021",
  "price" : 56.25
}, {
  "categorie" : "ACTE",
  "date" : "4/01/2021",
  "price" : 31
},

然后我不知道如何在相同的 JavaScript 函数中解析这些数据。

我试过了 ：

var allProducts = data.map(function (e) {
  return e.categorie
});

但它不起作用。

标签： javascriptjsonchart.js

解决方案

抱歉，这是完整的 javascript 函数：

    var data = **Data** ;
function onlyUnique(value, index, self) {
    console.log(value, index, self);
    return self.indexOf(value) === index;
}
var year;
var dates = data.map(function (e) {
    var date = new Date(e.data.date);
    year = date.getFullYear();
    var month = date.toLocaleString('default', {
        month: 'long'
    })
    return moment(date).format("MMM");
});
var allProducts = data.map(function (e) {
    return e.data.categorie
});
var products = allProducts.filter(onlyUnique);
var array = [];
products.forEach(function (e, i) {
    var prod = e;
    var list = data.filter(function (e) {
        return e.data.categorie === prod
    })
    console.log(list);
    var s = list.map(function (e) {
        return e.data.price
    });
    var obj = {
        name: e,
        data: s
    };
    array[i] = obj
    return array
})
console.log(array);
var categories = dates.filter(onlyUnique);
var series = array;
var options = {
    series: series,
    chart: {
        type: "bar",
        height: 500,
        stacked: true,
        events: {
            click: function (event, chartContext, config) {
window.FileMaker.PerformScript("Event","Hi");
                console.dir(chartContext);
                console.dir(config)
            }
        }
    },
  dataLabels: {
    enabled: true,
    style: {
        colors: ['#333'],
fontSize: '10px'
    },
   
  },
    plotOptions: {
        bar: {
            horizontal: false,
            startingShape: 'flat',
            endingShape: 'flat',
            columnWidth: '90%',
            dataLabels: {
                position: 'bottom',
                orientation: 'horizontal',
                maxItems: 20
            }
        },
    },
    stroke: {
        width: 0
    },
    title: {
        text: "Product Sales for " + year,
    },
    xaxis: {
        categories: categories,
        labels: {
            style: {
                fontSize: '16px'
            }
        }
    },
    yaxis: {
        title: {
            text: undefined,
            labels: {
                formatter: function (val) {
                    return val;
                },
            },
        },
    },
    tooltip: {
        y: {
            formatter: function (val) {
                return val;
            },
        },
    },
    fill: {
        opacity: 1,
    },
    legend: {
        position: "top",
        horizontalAlign: "left",
        offsetX: 40,
    },
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

推荐阅读