时间戳

首页 > 解决方案 > 如何在 Chart.js 上使用 Jitter 在 Boxplot 上显示单个数据点

javascript - 如何在 Chart.js 上使用 Jitter 在 Boxplot 上显示单个数据点

问题描述

我目前正在使用chart.js 做我的项目，我使用图表类型'boxplot'，并且在当前版本中没有关于图表'boxplot' 的文档或信息，所以我使用旧CDN 版本chartjs-chart-box-and-violin -plot，它是成功的，但我仍然必须在图形中显示每个单独的数据点，比如小点，抖动散布有点像，但我不知道是怎么回事，因为没有文档，这是我的意思的例子在此处输入图像描述

const myChart = document.getElementById('myChart').getContext('2d');
const label = ['A','B','C','D','E'];
const datas = [
  [85, 19, 53, 100, 76],
  [65, 86, 13, 68, 34],
  [32, 9, 45, 81, 63],
  [13, 94, 64, 75, 21],
  [74, 92, 35, 90, 2]
];
const colorRed = 'rgba(255, 99, 132, 0.3)';
const borderRed = 'rgba(255, 99, 132, 1)';

const iChart = new Chart(myChart, {
    type: 'boxplot',
    data: {
        labels: label,
        datasets: [{
            label: 'EQA-Übereinstimmung',
            data: datas,
            backgroundColor: colorRed,
            borderColor: borderRed,
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
          display: true,
          text: 'Test',
          fontSize: 20,
        },
        scales: {
          xAxes: [{
            maxBarThickness: 35,
          }]
        },
      legend: false,
    }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="boxplot.css">
    <script src='https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js'></script>
    <script src='https://unpkg.com/chartjs-chart-box-and-violin-plot@2/build/Chart.BoxPlot.js'></script>
</head>
<body>
    <div class="dashboard">
        <canvas id="myChart" width="600" height="400"></canvas>
        <script src="userChart.js"></script>
    </div>
</body>
</html>

我真的需要一些帮助，伙计们...

标签： javascripthtmlplotchart.js

解决方案

推荐阅读