chart.js中高图的负条形图

不是塞拉姆

我一直在与Chartjs一起玩,以生成类似highcharts的内容,但无法将其关闭。该应用程序已完成,购买高价图表,从chartjs迁移此单个图表似乎很浪费。

Chartjs是否可以输出类似的内容?我确实尝试在单独的画布中并排创建两个水平条形图。当我看到输出时;行为不是我想要的。

卑鄙的

您可以使用带有两个数据集的水平堆叠条形图。将负值添加到左侧的数据集(公),但在xAxis和工具提示的回调中显示绝对值。

var ctx = document.getElementById('myChart').getContext('2d');
var data = {
  labels: ["20-30", "10-20", "0-10"],
  datasets: [{
      label: "Male",
      backgroundColor: "rgba(54, 162, 235, 0.2)",
      borderColor: "rgb(54, 162, 235)",
      borderWidth: 2,
      data: [-65, -59, -20],
    }, {
      label: "Female",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      data: [72, 45, 18],
    },

  ]
};

var myBarChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: data,
  options: {
    scales: {
      yAxes: [{
        stacked: true
      }],
      xAxes: [{
      	ticks: {
         	callback: function(value, index, values) {
          	return Math.abs(value);
          }
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItems, data) {
        	return data.datasets[tooltipItems.datasetIndex].label  + ": " +  Math.abs(tooltipItems.xLabel);
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档