Chart.js 箱线图：添加额外的参考价值？

Question

我正在使用 Chart.js 生成箱线图。 https://github.com/sgratzl/chartjs-chart-boxplot

我想做的是在这个图表上绘制一些附加值？因此，当我显示箱线图时，我想例如在其顶部显示当前值以显示它与分布的比较情况。我怎么能做到这一点？

https://codepen.io/sgratzl/pen/QxoLoY 如果以上述示例为例，我如何在现有箱线图上绘制示例值，显示值 X、Y、Z 只是为了查看与分布的比较情况？

那么在下面的代码中，我应该在哪里添加值 X、Y、Z 只是为了在图表上显示它们而不以任何其他方式使用它们？

function randomValues(count, min, max) {
  const delta = max - min;
  return Array.from({length: count}).map(() => Math.random() * delta + min);
}

const boxplotData = {
  // define label tree
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Dataset 1',
    backgroundColor: 'rgba(255,0,0,0.5)',
    borderColor: 'red',
    borderWidth: 1,
    outlierColor: '#999999',
    padding: 10,
    itemRadius: 0,
    data: [
      randomValues(100, 0, 100),
      randomValues(100, 0, 20),
      randomValues(100, 20, 70),
      randomValues(100, 60, 100),
      randomValues(40, 50, 100),
      randomValues(100, 60, 120),
      randomValues(100, 80, 100)
    ]
   
  }, {
    label: 'Dataset 2',
    backgroundColor:  'rgba(0,0,255,0.5)',
    borderColor: 'blue',
    borderWidth: 1,
    outlierColor: '#999999',
    padding: 10,
    itemRadius: 10,
    data: [
      randomValues(100, 60, 100),
      randomValues(100, 0, 100),
      randomValues(100, 0, 20),
      randomValues(100, 20, 70),
      randomValues(40, 60, 120),
      randomValues(100, 20, 100),
      randomValues(100, 20, 100),
    ]
  }]
};
window.onload = () => {
  const ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: 'boxplot',
    data: boxplotData,
    options: {
      responsive: true,
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Box Plot Chart'
      }
    }
  });

};

Answer 1

如果我理解正确，您可以在数据集中添加这些自定义属性。在此之后，您可以使用 datalabels 插件来可视化它们：

Chart.register(ChartDataLabels)

function randomValues(count, min, max) {
  const delta = max - min;
  return Array.from({
    length: count
  }).map(() => Math.random() * delta + min);
}

const boxplotData = {
  // define label tree
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    x: 8,
    y: 16,
    z: 2,
    label: 'Dataset 1',
    backgroundColor: 'rgba(255,0,0,0.5)',
    borderColor: 'red',
    borderWidth: 1,
    outlierColor: '#999999',
    padding: 10,
    itemRadius: 0,
    data: [
      randomValues(100, 0, 100),
      randomValues(100, 0, 20),
      randomValues(100, 20, 70),
      randomValues(100, 60, 100),
      randomValues(40, 50, 100),
      randomValues(100, 60, 120),
      randomValues(100, 80, 100)
    ]
  }, {
    x: 5,
    y: 6,
    z: 20,
    label: 'Dataset 2',
    backgroundColor: 'rgba(0,0,255,0.5)',
    borderColor: 'blue',
    borderWidth: 1,
    outlierColor: '#999999',
    padding: 10,
    itemRadius: 0,
    data: [
      randomValues(100, 60, 100),
      randomValues(100, 0, 100),
      randomValues(100, 0, 20),
      randomValues(100, 20, 70),
      randomValues(40, 60, 120),
      randomValues(100, 20, 100),
      randomValues(100, 80, 100)
    ]
  }]
};
window.onload = () => {
  const ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: 'boxplot',
    data: boxplotData,
    options: {
      scales: {
        y: {
          grace: '5%'
        }
      },
      responsive: true,
      plugins: {
        datalabels: {
          formatter: (val, ctx) => (`${ctx.dataset.x} ${ctx.dataset.y} ${ctx.dataset.z}`),
          align: 'end',
          offset: (ctx) => {
            const center = ctx.chart.scales.y.getPixelForValue(ctx.chart.getDatasetMeta(ctx.datasetIndex)._parsed[ctx.dataIndex].mean);
            const max = ctx.chart.scales.y.getPixelForValue(ctx.chart.getDatasetMeta(ctx.datasetIndex)._parsed[ctx.dataIndex].max);
            return center - max;
          }
        }
      }
    }
  });

};

<script src="https://unpkg.com/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
<script src="https://unpkg.com/@sgratzl/chartjs-chart-boxplot@3.6.0/build/index.umd.min.js"></script>
<div id="container">
  <canvas id="canvas"></canvas>
</div>

codepen