图表树状图示例

Question

我目前正在我的项目中使用chart.js，我不得不说这是一个了不起的库。然而，我最近意识到我还需要一个"树状图"，但我无法在他们的网站上找到。有没有人设法使用 chart.js 实现树状图示例？

Answer 1

此代码段是 chart.js 的树状图模块的示例。
这里还有更多示例和文档。

var topTags = [
  {tag:'python',num:133269},{tag:'javascript',num:109742},{tag:'java',num:65490},{tag:'c#',num:45445},{tag:'html',num:43767},{tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},{tag:'python',num:29942},{tag:'css',num:29654},{tag:'r',num:28319},{tag:'c++',num:27389},{tag:'node.js',num:25415},{tag:'angular',num:24093},{tag:'pandas',num:23826},{tag:'arrays',num:23075},{tag:'jquery',num:18968},{tag:'mysql',num:18863},{tag:'swift',num:17971},{tag:'ios',num:17600},{tag:'json',num:15589},{tag:'laravel',num:15537},{tag:'flutter',num:15201},{tag:'c',num:15195},{tag:'django',num:14748},{tag:'sql',num:12752},{tag:'reactjs',num:10974},{tag:'excel',num:10962},{tag:'list',num:10726},{tag:'regex',num:10676}
];
var canvas = document.getElementById("treemap");
var ctx = canvas.getContext("2d");
var chart = window.chart = new Chart(ctx, {
  type: "treemap",
  data: {
    datasets: [{
      tree: topTags,
      key: "num",
      groups: ['tag'],
      spacing: 0.5,
      borderWidth: 1.5,
      fontColor: "black",
      borderColor: "grey"
    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: { display: false },
    tooltips: { enabled: false }
  }
});

body { margin: 0; overflow: hidden; }
canvas { width: 100vw; height: 100vh; }

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>
<canvas id="treemap"></canvas>