Question

我目前在我的项目中使用chart.js，我不得不说它是一个了不起的图书馆。但是我最近意识到我还需要一个＆＃34; treemap＆＃34;这是我在他们的网站上找不到的。有没有人设法使用chart.js实现树图示例？

Answer 1

此代码段是treemap的chart.js模块的示例。
另外还有more examples和documentation。

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>

Answer 2

Chart.js很棒，但图表类型很少。 Chart.js是lib使用提供的图表，而不是创建自己的图表类型。

D3.js是用于生成数据可视化的库。 See examples。您可以找到使用this

完成的一些树形图示例（例如this或d3.js）

Chartjs树图示例

2 个答案: