从右到左绘制水平条形图

debugcn 发表于 Dev

穆罕默德·萨马迪

正如您在此jsfiddle中所看到的，我正在Chart.js中创建水平条形图。

我想更改图表方向，以便从右到左绘制。我试过了dir = rtl，在CSS中，direction=rtl但是它们不起作用。

这就是我要的：

兴奋剂

我在文档中找不到本机的方法来执行此操作，但是您可以通过对数据取反的相当简单的解决方法来做到这一点，以便Chart.js绘制负值：

反转数据集中的值：

data.datasets[0].data.map((currentValue, index, array) => {
  array[index] = currentValue * -1;
});

将y轴右对齐：

scales: {
  yAxes: [{
    position: 'right'
    ...

重新显示格式的工具提示：

options = {
  tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var label = data.datasets[tooltipItem.datasetIndex].label || '';

      if (label) {
        label += ': ';
      }
      label += tooltipItem.xLabel * -1;
      return label;
    }
  }
  ...

重新格式化显示滴答：

xAxes: [{
  ticks: {
    callback: function(value, index, values) {
      return value * -1;
    }
...

这是一个工作示例：

var data = {
  labels: ["x1", "x2", "x3", "x4", "x5"],
  datasets: [{
    label: "Actual",
    backgroundColor: 'rgba(0, 0, 255, 0.5)',
    borderWidth: 1,
    data: [40, 150, 50, 60, 70],
    yAxisID: "bar-y-axis1"
  }]
};

// invert the sign of each of the values.
data.datasets[0].data.map((currentValue, index, array) => {
  array[index] = currentValue * -1;
});

var options = {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label || '';

        if (label) {
          label += ': ';
        }
        label += tooltipItem.xLabel * -1; // invert the sign for display.
        return label;
      }
    }
  },
  scales: {
    yAxes: [{
      id: "bar-y-axis1",
      categoryPercentage: 0.5,
      barPercentage: 0.5,
      position: 'right' // right-align axis.
    }],

    xAxes: [{
      id: "bar-x-axis1",
      stacked: false,
      ticks: {
        callback: function(value, index, values) {
          return value * -1; // invert the sign for tick labelling.
        },
        beginAtZero: true
      }
    }]
  }
};

var ctx = document.getElementById("canvas").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: data,
  options: options
});

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

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

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

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

绘制条形图

来自分类Dev

绘制条形图

来自分类Dev

D3.js水平条形图-更改条形方向（从左到右，而不是从右到左）

来自分类Dev

使用分组的水平条形图绘制数组

来自分类Dev

条形图的水平轴

来自分类Dev

Seaborn 水平条形图

来自分类Dev

绘制多个条形图

来自分类Dev

并排绘制条形图

来自分类Dev

EPPlus图表：如何绘制垂直条形图而不是水平默认图

来自分类Dev

如何使用amchart从右到左开始条形图？

来自分类Dev

使用Python库绘制共享相同y轴的两个水平条形图

来自分类Dev

如何在条形图Chart.js上绘制水平线

来自分类Dev

如何加载和转换数据以绘制水平堆叠条形图？

来自分类Dev

如何在条形图Chart.js上绘制水平线

来自分类Dev

使用带 2 条轨迹的袖扣在 Plotly 中绘制水平条形图

来自分类Dev

使用星号的水平条形图

来自分类Dev

数据框水平堆积条形图

来自分类Dev

R：水平条形图（简单的甘特图）

来自分类Dev

如何水平显示堆积的条形图？

来自分类Dev

创建水平条形图

来自分类Dev

水平条形图y轴对齐

来自分类Dev

Amcharts - 移动水平条形图

来自分类Dev

在python中绘制条形图

来自分类Dev

绘制Pandas Multiindex条形图

来自分类Dev

从Pandas DataFrame绘制条形图

来自分类Dev

熊猫-绘制堆积的条形图

来自分类Dev

在R中绘制条形图

来自分类Dev

用散景绘制条形图

来自分类Dev

如何绘制熊猫系列的条形图？

Related 相关文章

文章