是否有可能使用高图表热图图表使用拉力sdk？

Question

我正在构建一个集会自定义HTML应用程序。我想要制作一个热图。我怎么能这么做？

我尝试创建‘热图’类型的拉力图(下面的代码)。因此，我在控制台中看到404错误消息：

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

当我试图直接使用高海图库时，我与https://rally1.rallydev.com/apps/2.1/lib/analytics/analytics-all.js发生了冲突--高图集被加载了两次。因此，我猜分析库不加载，并且我得到一个类似于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

您将要遇到的问题是，High曲线图v3.0.10被捆绑到分析代码中。这样做的目的是为了有一个已知的高海图库与添加的Lumenize代码一起使用-即它们匹配。如果SDK在启动时找不到高级图表库(即window.Highcharts未定义)，则动态加载分析库。

这样做的结果是，改变高图表的排列方式来添加热图看起来是非常荒唐的。更擅长javascript库加载/重载的人可能会有不同的看法。在应用程序启动后，您必须将heatmap.js文件加载到应用程序中(在“启动”中？)才能避开动态载荷。

我知道这与你的高图表问题没有直接关系，但是如果它只是你想要的“热图”，而不一定是高图表热图，我已经开始使用d3来可视化拉力的东西。如果您感兴趣，这里有一个d3热图示例：http://bl.ocks.org/tjdecke/5558084

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