Нарисуйте горизонтальную гистограмму справа налево - PullRequest
Новая
       7

Нарисуйте горизонтальную гистограмму справа налево

1 голос
/ 23 марта 2020

Я создаю горизонтальную гистограмму на графике. js, как вы можете видеть в этом jsfiddle .

Я хочу изменить направление диаграммы так, чтобы оно dr aws справа налево. Я пробовал dir = rtl и в CSS direction=rtl, но они не работают.

Это то, что я хочу: expected chart output

1 Ответ

1 голос
/ 23 марта 2020

Я не могу найти в документации родной способ сделать это, но вы можете сделать это с помощью довольно простого обходного пути, заключающегося в отрицании данных, так что диаграмма. js dr aws отрицательные значения:

  1. инвертировать значения в наборе данных: 

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

  2. выравнивание по оси Y по правому краю: 

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

  3. переформатировать всплывающие подсказки для отображения: 

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

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

  4. переформатировать тики для отображения: 

    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>
...