Question

谁知道如何在栏内绘制线和点，如下所示：

Answer 1

您可以将线条绘制为浮动条，其中使用语法[min, max]指定各个条，这与您对其他条所做的相同。给定一个数字值数组，可以使用Array.map()如下生成“行” data。

data: [110, 150, 140, 100, 120].map(v => [v - 1, v + 1])

然后，您需要为“ bar”和“ line”数据集定义单个堆叠的xAxes。为了在tooltips中显示原始的“行”值，还需要一个toolips.callback.label函数。

可以在type 'scatter'的附加数据集中定义点。

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

new Chart("chart", {
  type: "bar",
  data: {
    labels: ["4", "3", "2", "1", "0"],
    datasets: [{
        label: "Bars",
        backgroundColor: "rgba(0, 255, 0, 0.2)",
        data: [[20, 100], [50, 180], [60, 120], [10, 130], [70, 140]],
        xAxisID: "x-axis-actual",
        order: 1
      },
      {
        label: "Lines",
        backgroundColor: "rgb(0, 0, 0)",
        data: [90, 150, 110, 90, 120].map(v => [v - 1, v + 1]),
        xAxisID: "x-axis-target",
        order: 2        
      },
      {
        label: "Points",
        backgroundColor: "rgb(255, 255, 255)",
        borderColor: "rgb(0, 0, 0)",
        data: [80, 110, 90, 100, 120],
        type: "scatter"        
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          const dataset = data.datasets[tooltipItem.datasetIndex]; 
          const v = dataset.data[tooltipItem.index];
          return dataset.label + ': ' + (tooltipItem.datasetIndex == 1 ? (v[1] + v[0]) / 2 : tooltipItem.value);
        }
      }
    },
    scales: {
      xAxes: [{
          id: "x-axis-target",
          stacked: true
        },
        {
          display: false,
          offset: true,
          stacked: true,
          id: "x-axis-actual",
          gridLines: {
            offsetGridLines: true
          }
        }
      ],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="120"></canvas>

在条形图中的条形图内绘制点和线

1 个答案: