Блог

У меня есть данные JSON, и я хочу создать из них тепловую карту highcharts. Я не уверен, как форматировать данные JSON в требуемом формате.

Мои данные JSON:

     let json = [
            {
                "metric": 4940616.0,
                "title": "d_revenue",
                "date": "2020-01-01"
            },
            {
                "metric": 5132162.0,
                "title": "p_revenue",
                "date": "2020-02-01"
            },
            {
                "metric": 4954576.0,
                "title": "s_revenue",
                "date": "2020-03-01"
            },
            {
                "metric": 4882217.0,
                "title": "d_revenue",
                "date": "2020-01-01"
            },
            {
                "metric": 4869609.0,
                "title": "t_revenue",
                "date": "2020-03-01"
            },
            {
                "metric": 5075422.0,
                "title": "p_revenue",
                "date": "2020-04-01"
            },
            {
                "metric": 4461996.0,
                "title": "v_revenue",
                "date": "2020-01-01"
            }
        ]
  

Мне нужны date оси x и metric оси y.

Я сделал это, чтобы создать категории для xaxis и yaxis:

 var x_cats = [],
y_cats=[],
heat_data=[];
json.forEach(d=>{
    x_cats.push(d.date);
    y_cats.push(d.title);
});
var x_axis = [...new Set(x_cats)];
var y_axis = [...new Set(y_cats)];
  

Я не уверен, как создать, data который должен быть в формате, подобном [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ] (не из данных JSON, поясняющий формат).

Я не уверен, как создать это из данных JSON, которые у меня есть выше.

Это мой код Highcharts:

 Highcharts.chart('container', {

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


    title: {
        text: 'Sales per employee per weekday'
    },

    xAxis: {
        categories: x_axis
    },

    yAxis: {
        categories: y_axis,
        title: null,
        reversed: true
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var ix = point.index   1,
                    xName = getPointCategoryName(point, 'x'),
                    yName = getPointCategoryName(point, 'y'),
                    val = point.value;
                return ix   '. '   xName   ' sales '   yName   ', '   val   '.';
            }
        }
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    },

    tooltip: {
        formatter: function () {
            return '<b>'   getPointCategoryName(this.point, 'x')   '</b> sold <br><b>'  
                this.point.value   '</b> items on <br><b>'   getPointCategoryName(this.point, 'y')   '</b>';
        }
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: FORMATTED_DATA,
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                yAxis: {
                    labels: {
                        formatter: function () {
                            return this.value.charAt(0);
                        }
                    }
                }
            }
        }]
    }

});
  

Не уверен, что поставить на место FORMATTED_DATA .