如何使用节点红色的chart.js创建双轴饼图

Question

正如标题所示，我希望使用Node-RED中的chart.js创建一个像附件一样的饼图。这是一张饼形图，显示了当天的活动记录，但我很担心，因为我不能设置双轴标签。

​

​

Answer 1

您可以使用图表.插件-数据标记和定义一个带有weight: 0的dataset来显示数字。

{
  data: [...Array(24)].map(v => 1),
  weight: 0,        
  rotation: -7.5,
  borderWidth: 20,
  datalabels: {
    formatter: (v, ctx) => ctx.dataIndex
  }
}

要改进数字的定位，请参阅chartjs-plugin-datalabels文档这里。

请看下面运行的代码，看看它是如何工作的。

​

Chart.register(ChartDataLabels);
new Chart('myChart', {
  type: 'pie',
  data: {
    labels: ['red', 'blue', 'green', 'gray'],
    datasets: [{
        data: [...Array(24)].map(v => 1),
        weight: 0,        
        rotation: -7.5,
        borderWidth: 20,
        datalabels: {
          formatter: (v, ctx) => ctx.dataIndex
        }
      },
      {
        label: 'My Dataset',
        data: [48, 56, 33, 44],
        backgroundColor: ['rgba(255, 0, 0, 0.2)', 'rgba(0, 0, 255, 0.2)', 'rgba(0, 255, 0, 0.2)', 'rgba(124, 124, 124, 0.2)'],
        datalabels: {
          textAlign: 'center',
          formatter: (v, ctx) => {
            const dataset = ctx.chart.data.datasets[1];
            return ctx.chart.data.labels[ctx.dataIndex] + ': ' + dataset.data[ctx.dataIndex];
          }
        }
      }
    ]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="myChart" height="300"></canvas>

​