Question

我正在构建一个集会定制HTML应用程序。我想创建一个热图图表。我该怎么办？

我试图创建“热图”类型的拉力赛图表（下面的代码）。结果，我在控制台中看到404错误消息：

GET https://rally1.rallydev.com/slm/panel/highcharts/heatmap.js?_dc=1558434971290 404

当我尝试直接使用Highcharts库时，我与https://rally1.rallydev.com/apps/2.1/lib/analytics/analytics-all.js发生冲突-highcharts被加载两次。结果我无法加载分析库，因此我得到类似Lumenize.Time的错误。

    this.chart = this.add(
            Ext.create('Rally.ui.chart.Chart', {

                loadMask: false,
                chartData: {
                    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'
                        }
                    }]
                },

                chartConfig: {

                    chart: {
                        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
                    },

                    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>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                                this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
                        }
                    },

                }
            })
        );

Answer 1

您要遇到的问题是Highcharts v3.0.10已捆绑到分析代码中。这样做是为了使已知的Highcharts库与添加的Lumenize代码一起使用-即它们匹配。如果SDK在启动时找不到Highcharts库（即window.Highcharts未定义），则会动态加载分析库。

这样做的结果是，更改Highcharts布置以添加热图看起来是相当麻烦的。擅长JavaScript库加载/重载的人可能会有不同的看法。您必须在应用程序启动后（在“启动”中）将heatmap.js文件加载到应用程序中。

我知道这与您的Highcharts问题没有直接关系，但是如果您只是追随的“热图”（不一定是Highcharts热图），我已经开始使用d3可视化Rally中的内容。如果您对此感兴趣，这里有一个d3热图示例：doc

为了使d3在Rally自定义应用程序中工作，我做了一些工作。我的github上有一些示例，但请在此处查看：http://bl.ocks.org/tjdecke/5558084

是否可以通过RSDK使用Highcharts热图图表？

1 个答案: