Chartjs改变水平轴值

Question

在 Chartjs 中设置哪些选项来更改水平轴值，从下面的代码中将基值设置为 100，而不是 0。

Chart to look like this, but y-axis base should be a 100 and not 0 as shown in the graph here.

因此，如果在条形图上绘制 70 的值，那么它的 y 轴应该从 100 到 70 开始。而 120 的值应该在它的 y 轴上从 100 到 120 开始。

Mock up, Excel version of how it should look like.

我在这里尝试了一些答案，但无法在 Chartjs 中实现。

注意：我正在处理来自 chartjs 网站的示例代码。但是，仍然无法根据需要得到具体的缩放比例。

Chartjs 2.6.0

var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var color = Chart.helpers.color;
    var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: [140,10,60,69,56,110]

        }, {
            label: 'Dataset 2',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [50,120,70,98,130,34]
        }]

    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            }
        });

    };

已编辑删除了随机数，并编辑了用于测试目的的常量。我目前正在研究 Chartjs 的插件。此选项在分布式包中可能不可用。

Answer 1

只需添加

ticks: {           
    min:100
}

在 y 轴刻度下的选项中，您的选项应如下所示。

options: {
    scales: {
        yAxes:[{
            ticks: {
                min:10
            }
        }],
    },
    responsive: true,
    legend: {
        position: 'top',
    },
    title: {
        display: true,
        text: 'Chart.js Bar Chart'
    }
}

P.s：检查缩进，因为我没有使用编辑器。

编辑可能是您在这种情况下已堆叠删除了堆叠类型。看到这个fiddle

Answer 2

基于@adeel 建议的解决方法答案：

因此，从下面的小提琴中，我在 y 轴和 x 轴上都使用了堆叠，以获得所需的效果。以第一个数据集（只是一个偏移数据集）为基础，叠加第二个数据集（实际），得到想要的效果。

fiddle

var ctx = document.getElementById("myChart").getContext("2d");
var data = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    label: "Offset",
    backgroundColor: "transparent",
    data: [50,100,70,60,100,100]
  },{
    label: 'Actual Dataset',
    backgroundColor: 'Blue',
    borderWidth: 1,
    data: [50,20,30,40,30,70]
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true,
      }]
    },
  }
});