Question

我正在使用Highchart treemap来显示项目的构建状态。传递绿色，传递红色失败。

如果有些项目处于通过状态而有些失败则可以使用。

但是，如果所有项目都处于通过状态，highchart会将其显示为棕色（绿色和红色的平均值）。我想那是因为没有失败的项目，所以它平均了颜色。

代码：

Highcharts.chart(divId, {
            colorAxis: {
                minColor: '#00B300', // green
                maxColor: '#8fb200'  // red
            },
            tooltip: {
                enabled: false
            },
            legend: {
                enabled: false,
                useHTML: true,
                labelFormatter: function () {
                    return this.name + ' (click to hide)';
                }
            },
            series: [{
                type: 'treemap',
                layoutAlgorithm: 'squarified',
                data: mapData, // my JSON data containing projects status
            }],
            title: {
                text: 'Project Status',
                style: {
                    fontSize: 15,
                    fontWeight: 'bold'
                }
            },
            chart: {
                margin: [30, 0, 0, 0],
                height: 170
            },
            exporting: {
                enabled:false
            }

        });

请提出建议，我想念什么？

谢谢

Answer 1

您可以通过添加两个伪造的点来解决此问题，一个伪造点的最小值为colorValue，另一个伪造点的最大值为colorValue，然后关闭这两个点的可见性。假设您的colorValues从0到1，您可以执行以下操作：

var mapData = [{
  "name": "project1",
  "value": 1,
  "colorValue": 1
}, {
  "name": "project2",
  "value": 1,
  "colorValue": 1
},{value: 1, colorValue: 0, visible: false}, {value: 1, colorValue: 1, visible: false}];

工作示例： https://jsfiddle.net/ewolden/1k5by6pu/3/

Alternativley，您可以添加具有相同要点的假系列：

 series: [{
   type: 'treemap',
   layoutAlgorithm: 'squarified',
   data: mapData,
 }, {
   type: 'treemap', 
   name: 'fakeSeries',
   visible: false, 
   data: [{value: 1, colorValue: 0}, {value: 1, colorValue: 1}]
 }]

工作中的JSFiddle示例： https://jsfiddle.net/ewolden/0bse4x57/2/

Answer 2

这是不可能的，因为我们使用最大和最小颜色。为此使用了其他技巧-在mapData中添加2个默认值（绿色代表1，红色代表1），并使用j-query隐藏此块。如果您没有任何问题，可以在这里给我json数据吗？

https://www.highcharts.com/demo/treemap-coloraxis

高图树图颜色平均

2 个答案: