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时，应该从100到120开始＆＃39; y轴。

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

Chartjs改变水平轴值

2 个答案: