Question

我一直在玩Chartjs来生成类似highcharts的东西，但无法将其逼近。应用程序已经完成，购买高价图表似乎是浪费，从图表中为此单一图表迁移。

Chartjs有没有办法输出类似的东西？我尝试在单独的画布中并排创建两个水平条形图;我看到了输出;这种行为不是我想要的。

Answer 1

您可以使用带有两个数据集的水平stacked条形图。在左侧（男性）的数据集中添加负值，但在xAxis和工具提示的回调中显示绝对值。

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>

＆＃13;

chartjs中highcharts的负条形图

1 个答案: