Chart.js 树状图自定义文本

Question

在我下面的代码中，我能够绘制树状图并在每个树单元格中显示标签。但是我想在我的标签旁边添加一些自定义文本，

比如我希望单词 'Language' 出现在每个树状图单元格中。我尝试了格式化程序选项，但它不适用于我正在使用的 chart.js 版本。请为我使用的特定版本提供解决方案。由于我定义了多个其他图表并且更改版本会导致问题。

  var topTags = [
  {tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},
];

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 }
  }
});

CHART.JS 和 TREEMAP 版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

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

Answer 1

格式化程序选项仅在树状图图表类型的版本 2 中添加，脚本化选项仅在版本 1 中可用，因此获取额外文本的最佳方法是先编辑原始数据数组并添加这样的文本：

let topTags = [{
  tag: 'android',
  num: 42657
}, {
  tag: 'reactjs',
  num: 38844
}, {
  tag: 'php',
  num: 34381
}, {
  tag: 'sql',
  num: 29996
}, ];

topTags = topTags.map(e => ({
  num: e.num,
  tag: `Lang: ${e.tag}`
}))

const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");
const 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
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>
<canvas id="chart"></canvas>

Chart.js 树状图自定义文本

Chart.js Treemap Custom text

javascript

graph

treemap

chart.js

chart.js2