Chartjs 更改横轴数值

Question

如何在Chartjs中设置选项以更改水平轴值，从下面的代码开始，使基础值为100，而不是0。

将图表设置为此样式，但y轴基点应为100，而不是此处图表中显示的0。

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

模拟版本，应如何看起来，Excel版本。

我尝试过一些答案，但无法在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的插件。这个选项可能在分发包中不可用。

- GSari

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'
    }
}

提示：请检查缩进，因为我没有使用编辑器。

编辑：如果您遇到问题，请移除堆栈类型。请参考此示例

- tech_geek

---

感谢@adeel的回复，我正在尝试它。但是，看起来它只在100处截断，并且不显示低于100的值。如果小于100，我希望条形图从100下降，并在超过100时向上堆叠。 - GSari

@GSari，你能否制作一个fiddle吗？这对社区和我来说都会非常有帮助。欢迎:) - tech_geek

@GSari，我已经创建了一个fiddle。在编辑中，您可以看到那个fiddle。 - tech_geek

根据您下面的建议进行了一些修改..谢谢。 - GSari

是的，我希望如此。顺便说一句，发现得不错。我给你点赞。干杯 :) - tech_geek

Answer 2

根据@adeel的建议提供的解决方案：

从下面的示例中可以看到，我在y轴和x轴上都使用了堆叠来获得所需的效果。第一个数据集（只是一个偏移数据集）用作基础来堆叠第二个数据集（实际数据集）以获得所需的效果。

示例

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,
      }]
    },
  }
});

- GSari

---

如果它也适用于动态数据集，那将非常有用。 - Mariana Marica