chartjs中是否有一种方法可以显示在公共时间线上Y偏移的不同布尔值？

Question

我目前有一个散点图，显示多个数据。现在，我想显示和比较布尔值。这些被覆盖，无法很好地分析。

当前表示：Chart with Boolean values

是否可以缩小Y轴的尺寸并在Y轴的y方向上设置偏移量？

或者作为替代方案，有可能将不同的图相互叠加，并使上方的X轴指向最低图的X轴？

目标是这样的表示：https://react.rocks/example/react-d3-boolean-chart

Answer 1

您可以通过移动单个数据集的y值来实现。例如，如果您有3个数据集，则值将>]

数据集1：

否：-0.1 /正确：0.9 数据集2： false：0 / true：1 数据集3：否：0.1 /正确：1.1

请查看下面的可运行代码段。

var chart = new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'A',
      data: [
          { x: "2020-06-07 08:51:22", y: -0.1 },
          { x: "2020-06-07 09:22:01", y: 0.9 },
          { x: "2020-06-07 09:37:28", y: -0.1 },
          { x: "2020-06-07 10:10:51", y: 0.9 },
          { x: "2020-06-07 11:42:54", y: 0.9 }
      ],
      borderColor: 'green',
      fill: false,
      steppedLine: 'before'
    },
    {
      label: 'B',
      data: [
          { x: "2020-06-07 08:45:17", y: 0 },
          { x: "2020-06-07 09:30:17", y: 1 },
          { x: "2020-06-07 10:15:16", y: 0 },
          { x: "2020-06-07 11:00:17", y: 1 },
          { x: "2020-06-07 12:15:16", y: 0 }
      ],
      borderColor: 'red',
      fill: false,
      steppedLine: 'before'
    },
    {
      label: 'C',
      data: [
          { x: "2020-06-07 09:00:28", y: 1.1 },
          { x: "2020-06-07 09:15:44", y: 0.1 },
          { x: "2020-06-07 10:41:05", y: 1.1 },
          { x: "2020-06-07 11:22:18", y: 0.1 },
          { x: "2020-06-07 12:33:54", y: 1.1 }
      ],
      borderColor: 'blue',
      fill: false,
      steppedLine: 'before'
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: tooltipItem => tooltipItem.value < 0.5 ? 'false' : 'true'
      }
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'minute',
          displayFormats: {
            minute: 'HH:mm'            
          },
          tooltipFormat: 'HH:mm'
        },
        ticks: {
          source: 'data',
          minRotation: 45
        },
        gridLines: {
          drawOnChartArea: false
        }
      }],
      yAxes: [{
        ticks: {
          min: -0.3,
          max: 1.3,
          fontSize: 14,
          fontStyle: 'bold',
          callback: value => {
            if (value == 0) {
              return 'off';
            } else {
              return value == 1 ? 'on' : '';
            }
          }  
        },
        gridLines: {
          display: false
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="70"></canvas>