是否可以通过 rally sdk 使用 highcharts 热图图表？

Question

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

我尝试创建 'heatmap' 类型的反弹图表（代码如下）。结果，我在控制台中看到了 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 undefined.

    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 库 loading/overloading 的人可能会有不同的看法。您必须在应用程序启动之后（在 'launch'？）将 heatmap.js 文件加载到应用程序中 以绕过动态加载。

我知道这与您的 Highcharts 问题没有直接关系，但如果它只是一个 'heatmap' 您想要的，不一定是 Highcharts 热图，我已经开始使用 d3 在 Rally 中可视化内容.如果您有兴趣，这里有一个 d3 热图示例：http://bl.ocks.org/tjdecke/5558084

我做了一些工作让 d3 在 Rally 自定义应用程序中工作。我的 github 上有几个示例，但请看这里：https://github.com/nikantonelli/Radial-Density

是否可以通过 rally sdk 使用 highcharts 热图图表？

Is it possible to use highcharts heat map chart using rally sdk?

rally