Chart Js 负刻度

新手上路,请多包涵

我需要以负值开始条形图刻度,我在 2.7.0 版本中使用 Chart Js。

图表必须从 -10 到 100。

图片示例:

在此处输入图像描述

这是可能的?

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

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

原文由 nawelittle 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 568
1 个回答

您好,您可以试试这个:您可以通过将对象传递给 tick 属性来定义 minmax 值。

有关详细信息,请访问此链接: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
        }
      }
    ]
  }
};

原文由 ishahadathb 发布,翻译遵循 CC BY-SA 4.0 许可协议

推荐问题