Question

在Chart.js 2.x中，有没有办法做一个水平条形图，以使条左或右的中点不为零？

我的数据都是1-10个值，但是我希望左边的数据值为＆lt; 5，右边的值＆gt; 5

我已经通过将值更改为-5到5来完成了一种解决方法，但是x轴显示为-5到5，工具提示显示“已转换”值...这两者都不是我想要的。

我想做的是什么？

谢谢，

斯科特

Answer 1

如上面的评论中所示，采用您的解决方法并使用tick format，您可以将刻度值转换为原始值：

＆＃13;

var origData = [1, 3, 7, 8, 10];
var origin = 5;
var chartData = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(0, 20, 250, 0.6)',
    borderColor: 'rgba(0, 20, 250, 0.9)',
    data: origData.map(function(value) { return value-origin; }),
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
      	color: 'red',
        type: 'category',
      }],
      xAxes: [{
        gridLines:{
          color: "black",
          borderDash: [5, 10],
          zeroLineColor:"red"
        },
        ticks: {
        	min: -5,
          max: 5,
          callback: function(value, index, values) {
            return value+origin;
          }
        }
      }],
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>

＆＃13;

将非零值作为水平条形图的中点？

1 个答案: