установка неравномерного шага шага по размеру с помощью chart.js - PullRequest
Новая
       16

установка неравномерного шага шага по размеру с помощью chart.js

0 голосов
/ 28 июня 2018

Я пытаюсь добиться чего-то подобного с помощью charts.js:

I'm trying to achieve something like this

Я хочу, чтобы каждый тик находился в определенной позиции, а не равномерно распределен по оси. Мне удалось добиться вышеупомянутого, условно установив цвет галочки на красный или прозрачный на основе его индекса. Похоже на это: 

const steps = [1,24, 54, 93]
const options = {
  scales: {
    yAxes: [{
      gridLines: {
        color: [...new Array(100)].map((x,i) => steps.includes(i) ? "rgba(255, 0, 0, 1)" : "rgba(255, 0, 0, 0)"),
      }
    }]
  }
}

Тем не менее, это решение кажется очень хакерским, и я хотел бы знать, предлагает ли chartsjs более простое решение

1 Ответ

0 голосов
/ 24 февраля 2019

Я искал ответ на похожую проблему, и я получил следующий взлом, который не обязательно лучше, чем ваш: -)

Ссылка на скрипку: https://jsfiddle.net/hdahle/obc4amfh/

var colors = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
var votes = [5, 6, 35, 76, 20, 10];

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  options: {
    responsive: true,
    legend: {
      display: false
    }
  },
  type: 'line',
  data: {
    labels: colors,
    datasets: [{
      label: 'Votes',
      data: votes,
      borderColor: 'rgba(30,150,60,0.8)',
      backgroundColor: 'rgba(30,150,60,0.3)',
      borderWidth: 1,
      fill: true,
    }]
  }
});

function drawHorizontalLine(value, color) {
  let d = [];
  for (let i = 0; i < myChart.data.labels.length; i++) {
    d.push(value)
  }
  myChart.data.datasets.push({
    data: d,
    pointRadius: 0,
    type: 'line',
    borderColor: color,
    borderWidth: 1,
    fill: false,
  });
  myChart.update();
}

drawHorizontalLine(76, 'rgba(175,40,50,0.6)');
drawHorizontalLine(44, 'rgba(175,40,50,0.6)');
drawHorizontalLine(21, 'rgba(175,40,50,0.6)');
drawHorizontalLine(12, 'rgba(175,40,50,0.6)');
drawHorizontalLine(3, 'rgba(175,40,50,0.6)');
...