如何使用 Highcharts 构建彩色树图

Question

我是 js 代码的初学者，我想使用 Highcharts 从 csv 中构建带有颜色的树状图。

我的 csv 看起来像这样：名称、值、颜色值

第一列是姓名。第二个是activity的百分比。第三个是颜色属性，表示（第二列的）百分比是增加还是减少（颜色从红色到绿色）。

有人举个例子吗？因为它不起作用，所以什么也没有发生（也没有错误），我认为它来自 csv 加载。

这是我的实际代码：

HTML :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <pre id="data" style="display:none">Name,Value,colorValue
      A,1,1
      B,10,25
      C,20,0
      D,30,16
      E,40,78
      F,50,85
      G,60,20
      H,70,35
      I,80,9
     </pre>    
  <div id="container"></div> 
  <script src="Highcharts/code/highcharts.js"></script>
  <script src="Highcharts/code/modules/heatmap.js"></script>
  <script src="Highcharts/code/modules/treemap.js"></script>
  <script src="Highcharts/code/modules/data.js"></script>
  <script src="index.js"></script>
</body>
</html>

我的 Js :

Highcharts.chart('container', {
    colorAxis: {
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[5]
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: {
            csv: document.getElementById('data').innerHTML,
            seriesMapping: [{
               colorValue: 2
            }]
        }
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});

Answer 1

CSV 数据属性不应在系列对象内，而应在图表对象内，如下所示：

Highcharts.chart('container', {
  colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[5]
  },
  data: {
    csv: document.getElementById('data').innerHTML,
    seriesMapping: [{
      colorValue: 2
    }]
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    keys: ['name', 'value', 'colorValue']
  }],
  title: {
    text: 'Highcharts Treemap'
  }
});

演示：

https://jsfiddle.net/BlackLabel/L4uo8h13/1/

API参考：

https://api.highcharts.com/highcharts/data.csv

如何使用 Highcharts 构建彩色树图

How to construct a colored treemap with Highcharts

javascript

colors

treemap

highcharts