Блог

Я пытаюсь реализовать тепловую карту высокого уровня. Графики, которые я использую, взяты непосредственно с веб-сайта Highcharts здесь: https://www.highcharts.com/demo/heatmap Ошибка, которую дает мне запуск с этими опциями, — это ошибка 15, и я направлен сюда: https://assets.highcharts.com/errors/15/ Ошибка говорит о том, что доступ X не в порядке возрастания. тем не менее, я перепробовал много вариантов, в том числе имел только 1 значение и установил все значения одинаковыми. Я всегда получаю эту ошибку. Тем не менее, я могу отображать линейные диаграммы.

Вот мой код:

 export class OverviewComponent implements OnInit {
...
Highcharts: typeof Highcharts = Highcharts;
chartOptions: Highcharts.Options = {};
ngOnInit() {
    this.init();
}

getPointCategoryName(point: any, dimension: any) {
    var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
    return axis.categories[point[isY ? 'y' : 'x']];
}

  init() {
    this.chartOptions = {
      chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


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

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
    },

    // yAxis: {
    //     // categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    //     title: null,
    //     reversed: true
    // },

    // accessibility: {
    //     point: {
    //         descriptionFormatter: function (point) {
    //             var ix = point.index   1,
    //                 xName = this.getPointCategoryName(point, 'x'),
    //                 yName = this.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: [{
      type: 'heatmap',
        name: 'Sales per employee',
        borderWidth: 1,
        data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }],

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

}
 

И на стороне HTML вещей:

 <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"
                            style="width: 100%; height: 50px; display: block;"></highcharts-chart>
 

Огромное спасибо за любую помощь в этом!

Здесь вы можете найти этот пример, который отлично работает: https://stackblitz.com/edit/highchart-highstock-blz8pe

 const heatmap = require('highcharts/modules/heatmap.js');
heatmap(Highcharts);