Question

我需要以负值开始条形图比例，我在2.7.0版本中使用Chart Js。

图表必须从-10到100。

图片示例：

它有可能吗？

＆＃13;

var canvas = document.getElementById('myChart');
var data = {
    labels: ["Test"],
    datasets: [
        {
            label: "-10 to 100",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [100],
        }
    ]
};
var option = {
	scales: {
  	yAxes:[{
    		stacked:true,
        gridLines: {
        	display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
    		gridLines: {
        	display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
	data:data,
  options:option
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

＆＃13;

Jsfiddle：https://jsfiddle.net/LilNawe/Luaf2tm4/636/

Answer 1

您好，您可以尝试这样做：您可以通过将对象传递给min属性来定义max或tick值。

有关详细信息，请访问此链接：http://www.chartjs.org/docs/latest/axes/radial/linear.html#tick-options

    var option = {
    scales: {
    yAxes:[{
            stacked:true,
        gridLines: {
            display:true,
          color:"rgba(255,99,132,0.2)"
        },
        ticks: {
           suggestedMax: 100,
           suggestedMin: -10
        }
    }],
    xAxes:[{
            gridLines: {
            display:false
        }
    }]
  }
};

Answer 2

您可以使用下面的代码在任何图表js图形中设置y轴的范围。在本例中，y 轴的最小值为 -100，y 轴的最大值为 100。

option: {    
  scales: {
    yAxes: [{
    ticks: { min: -100, max: 100 },
    }], 
  },
}

但是当使用上面的代码时，ticks(stepSize)/ gridline 之间的间隙会自动定义。所以你必须设置 stepSize 值，如下所示。在本例中，将 stepSize 值设为 10，您可以看到间隔为 10 的网格线。

option: {    
  scales: {
    yAxes: [{
      ticks: { min: -100, max: 100, stepSize: 10 },
    }], 
  }
}

所以根据上面的问题，最终的代码将如下所示并给出解释。

var canvas = document.getElementById("myChart");

var data = {
  labels: ["Test"],
  datasets: [
    {
      label: "-10 to 100",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [100],
    },
  ],
};

var option = {
  scales: {
    yAxes: [
      {
        ticks: { min: -10, max: 100, stepSize: 10 },
      },
    ],
    xAxes: [
      {
        gridLines: {
          display: false,
        },
      },
    ],
  },
};

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: option,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Answer 3

使用RGraph（https://www.rgraph.net）你可以像这个演示那样做：

https://www.rgraph.net/demos/bar-offset-x-axis.html

这是该页面的代码：

new RGraph.Bar({
    id: 'cvs',
    data: [14,16,68,-9,-6,40,36],
    options: {
        labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
        unitsPost: '%',
        shadow: false,
        colors: ['red'],
        strokestyle: 'rgba(0,0,0,0)',
        textSize: 10,
        title: 'A Bar chart with an offset X axis',
        numyticks: 11,
        gutterLeft: 50,
        scaleZerostart: true,
        ymin: -10,
        ymax: 100,
        backgroundGridVlines: false,
        backgroundGridAutofitNumhlines: 11,
        backgroundGridBorder: false,
        ylabelsCount: 11
    }
}).draw();

Answer 4

自Chart.js v2.9.0起，您可以使用floating bars进行此操作。不能使用语法[min,max]指定单个条。

var canvas = document.getElementById('myChart');
var data = {
    labels: ["Test"],
    datasets: [{
            label: "-10 to 100",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [[-10, 100]],
        }]
};
var option = {
	scales: {
  	yAxes:[{
        gridLines: {
          display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
    	gridLines: {
          display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
	data:data,
    options:option
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

图表Js负标度

4 个答案: