Рисование смешанной горизонтальной линии / линии в чартах - PullRequest
Новая
       51

Рисование смешанной горизонтальной линии / линии в чартах

0 голосов
/ 08 ноября 2019

Я посмотрел на документы / примеры для chartjs, но кто-нибудь знает способ сделать следующее?

  • Создание баров, где ширина (ось х) является переменной, но высотавсегда заполнен (он же вся ось Y)?
  • На графике может быть количество этих столбцов x x
  • Создать линию, которая охватывает весь путь по оси x, но может измениться. это ось Y (она же не прямая, а соблазнительная).

У меня есть грубый рисунок, где желтый - это столбцы, а черный - линия

Я вродевытащил первую часть, используя сложенные столбцы и поменяв местами ось, но ось Y (высота стержней) установлена ​​только на 1. Это проблема при попытке нарисовать изогнутую линию в смешанном режиме, поскольку существует только одна ось Yточка (вместо множества точек оси y):

Вот еще одна попытка, которая имеет несколько точек оси y, но я не могу контролировать ширину стержня:

Если кто-то может помочь (или, по крайней мере, сказать мне, если я иду в правильном направлении), это было бы очень признательно! 

Please see code in the jsfiddle link

Ответы [ 2 ]

1 голос
/ 14 ноября 2019

Похоже, что это лучшее решение:

https://codepen.io/kurkle/pen/ExxdyXQ

'

Кредит первоначальному автору этого кода (Юкка). Он ответил на это на странице вопросов chartjs.

1 голос
/ 11 ноября 2019

Хм, это сложно ... Единственное решение, которое у меня было бы, - это создать гистограмму с очень большим количеством очень маленьких баров.

Я создал JSBin со своим решением , но это далеко от идеального , но единственный способ добиться этого в chart.js. Я не тестировал производительность, так как не знаю ваших данных, но это будет очень важно и является самой большой проблемой.

В настоящее время возможен только один прямоугольник, но его нетрудно улучшить для несколькихпрямоугольники.

Вот весь мой код, такой же, как у JSBin: 

var chartData = {
  datasets: [{
    type: 'line',
    label: 'Dataset 1',
    borderColor: 'blue',
    borderWidth: 2,
    fill: false,
    data: []
  }, {
    type: 'bar',
    label: 'Dataset 2',
    backgroundColor: 'red',
    data: [],
  }]
};

var newData0 = []
var newData1 = []
var labels = []
var counter = 50

// Rectangle between two random Integers
var rectangleBetween = [Math.round(Math.random()*counter), Math.round(Math.random()*counter)]
rectangleBetween.sort(function(a, b){return a - b})

for (var i = 0; i < counter; i++) {
  labels.push(i)

  // Data for Dataset 1 (line):
  var newObj0 = {}
  newObj0.x = i
  // 50/50 chance of data
  if (Math.random()<0.5) {
    newObj0.y = Math.round(Math.random()*100)
  } else {
    newObj0.y = null
  }
  newData0.push(newObj0)

  // Data for Dataset 2 (bar):
  var newObj1 = {}
  if (i >= rectangleBetween[0] && i <= rectangleBetween[1]) {
    newObj1.x = i
    newObj1.y = 100
  } else {
    newObj1.x = i
    newObj1.y = 0
  }  
  newData1.push(newObj1)
}

chartData.datasets[0].data = newData0
chartData.datasets[1].data = newData1
chartData.labels = labels


var ctx = document.getElementById('chart').getContext('2d');
myMixedChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    responsive: true,
    spanGaps: true,
    title: {
      display: true,
      text: 'Chart.js Combo Bar Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      xAxes: [{
        //barThickness: 80, // number (pixels) or 'flex'
        //maxBarThickness: 100, // number (pixels)
        barPercentage: 1.0,
        categoryPercentage: 1.0,
        gridLines: {
          display: false
        }
      }]
    }
  }
});
...