如何在chart.js中正确创建混合类型的直线?

deyfvvtc  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(151)

帮我找出我的错误。
我使用chart.js 2.7.0。我有一个条形图,想添加两条线。其中一条应该是直的,通过所有图表。我尝试了两种方法,但它没有帮助我。
在第一种方法中,我向***数据集添加了***个值:

export const chartConfiguration = () => ({
  type: 'bar',
  data: {
    labels: null,
    datasets: [
      {
        label: 'Hourly',
        fill: false,
        data: [0.3494, 0.3361, 0.325, 0.3224],
        borderColor: '#ff0000',
        pointBackgroundColor: '#ff0000',
        type: 'line',
      },
      {
        label: 'Average',
        fill: false,
        data: Array(4).fill(1),
        borderColor: '#d67735',
        pointBackgroundColor: '#d67735',
        type: 'line',
        pointRadius: 0,
        pointHitRadius: 0,
        lineTension: 0,
        beginAtZero: true
      }]
  },
  options: {
    title: {
      display: true,
      position: 'top',
      fontColor: '#3f7ba2',
      fontStyle: 550,
      fontSize: 15
    },
    legend: {display: false},
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          stepSize: 1,
          min: 0,
          autoSkip: false,
          fontColor: '#3f7ba2',
          fontStyle: 550,
          fontSize: 11,
          padding: 5
        },
        gridLines: {
          color: '#dedfe7'
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          min: 0,
          fontColor: '#62aae8',
          padding: 5
        },
        gridLines: {
          color: '#dedfe7',
          tickMarkLength: 15
        }
      }],
    },
    annotation: {
      events: ['mouseenter', 'mouseleave'],
      annotations: []
    },});

我以为这样就行了,但我错了。问题是第一行带有标签“Hourly”的值为0.3494,而第二行带有标签:'Average'有一个值= 1。Chart.js绘制第二条线的值不是1,它绘制它的值0.3494 + 1 = 1.3494。我试图找到任何选项,如beginFromZero,但在这里它不存在以下是屏幕截图:

1.我试了第二个办法:我添加了一个插件,但它根本不工作,我不知道为什么:

export const chartConfiguration = () => ({
  type: 'bar',
  data: {
    labels: null,
    datasets: [{
      label: ' ',
      data: [1.9 , 2.0, 1.7, 1.8],
      borderColor: '#b1c8de',
      backgroundColor: '#b1c8de',
      pointBackgroundColor: '#b1c8de',
      tension: 0,
      fill: false,
      offsetGridLines: true
    }]
  },
  options: {
    title: {
      display: true,
      position: 'top',
      text: currentFullDate,
      fontColor: '#3f7ba2',
      fontStyle: 550,
      fontSize: 15
    },
    legend: {display: false},
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          stepSize: 1,
          min: 0,
          autoSkip: false,
          fontColor: '#3f7ba2',
          fontStyle: 550,
          fontSize: 11,
          padding: 5
        },
        gridLines: {
          color: '#dedfe7'
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          min: 0,
          fontColor: '#62aae8',
          padding: 5
        },
        gridLines: {
          color: '#dedfe7',
          tickMarkLength: 15
        }
      }],
    },
    config : {
        plugins: {
            afterDatasetsDraw: function(chart) {
              let lineAt = 1;
              const ctxPlugin = chart.chart.ctx;
              const xAxe = this._chart.scales[chart.config.options.scales.xAxes[0].id];
              const yAxe = this._chart.scales[chart.config.options.scales.yAxes[0].id];
              if (yAxe.min !== 0) {
                return;
              }
              ctxPlugin.strokeStyle = '#d67735';
              ctxPlugin.beginPath();
              lineAt = (lineAt - yAxe.min) * (100 / yAxe.max);
              lineAt = (100 - lineAt) / 100 * (yAxe.height) + yAxe.top;
              ctxPlugin.moveTo(xAxe.left, lineAt);
              ctxPlugin.lineTo(xAxe.right, lineAt);
              ctxPlugin.stroke();
            }
        } }
});
iklwldmw

iklwldmw1#

就像我在评论中说的,这种行为的发生是因为你堆叠了你的y轴。

相关问题