Chart.js混合图:不从零开始的行

u4vypkhs  于 2023-01-30  发布在  Chart.js
关注(0)|答案(2)|浏览(131)

现状chart
我想要的:chart
我建立了一个混合图表与线和酒吧。我有问题的线。线不从零开始。这是我的代码;https://jsfiddle.net/ameydan/vb4fsyqp/31/
'选项:{

legend: {
  display: false,

  position: 'top',
},

elements: {
  point: {
    radius: 0
  }
},

scales: {
  yAxes: [{
      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }

  ],

  xAxes: [{

      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }

  ]

}

}`
先谢谢你了。
起始于零:是的,没有解决问题。

krugob8w

krugob8w1#

那是因为你把堆叠设置为真。

scales: {
  yAxes: [{
      stacked: **false**,
      ticks: {
        beginAtZero: true
      }
    }

  ],

  xAxes: [{

      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }

  ]

}

编辑:
来自=〉https://www.chartjs.org/docs/latest/charts/mixed.html的第二个想法
此时,我们已经按照自己的意愿呈现了一个图表。**需要注意的是,在本例中,折线图的默认选项不会合并。**只有默认类型的选项会合并。在本例中,这意味着条形图的默认选项会合并,因为条形图是由类型字段指定的类型。
我找到解决办法了!
只需添加以下内容:

myChart.options.scales.xAxes[0].offset = false;
myChart.update();

唯一对应的是,如果有一个酒吧数据集的数据@索引0,它将只画一半,最后一个,以及显示如下:https://jsfiddle.net/0qsh8znu/1/

dl5txlt9

dl5txlt92#

我也遇到了同样的问题。当我遵循@rOulito的解决方案时,我发现我的折线图缺少偏移量,使它不再与条形图的数据点对齐,所以很遗憾,这不起作用。
我的解决方案是遵循chartjs plugin for annotations的文档
下面是我从折线图的第一个数据点到图的左下角画一条线的方法:

let options = {
    plugins: {
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            yMax: 50000,
            xMax: 0,
            borderColor: 'black',
            borderWidth: 3,
          },
        },
      },
    },
  };

相关问题