Chart.js 2 - Как я буду вертикально вставлять значения набора данных в гистограмму?

Question

Chart.js 2 - Как я буду вертикально вставлять значения набора данных в гистограмму?

1

Я хочу вертикально вставить значения набора данных в соответствующую гистограмму. Что я должен делать? Образец кода был бы весьма полезен.

Текущая часть кода

animation: {
  duration: 500,
  easing: "easeOutQuart",
  onComplete: function () {
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    this.data.datasets.filter(dataset => !dataset._meta[Object.keys(dataset._meta)[0]].hidden).forEach(function (dataset) {
      for (var i = 0; i < dataset.data.length; i++) {
        var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
        scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
        ctx.fillStyle = '#000';
        var y_pos = model.y - 5;
                  // Make sure data value does not get overflown and hidden
                  // when the bar value is too close to max value of scale
                  // Note: The y value is reverse, it counts from top down
                  if ((scale_max - model.y) / scale_max >= 0.70)
                    y_pos = model.y + 20; 
                  ctx.fillText(addCommas(dataset.data[i]), model.x, y_pos);
                }
          });               
  }
}

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

ожидаемый результат

если значение равно 35 400, то оно должно быть: 3 5, 4 0 0 (по вертикали)

IDN_Christian 18 сен. 2017, в 08:48

Источник

0

Вы хотите, чтобы надписи были вертикальными? У вас есть это `3 5, 4 0 0`. Значит ли это, что метки должны иметь пробел между каждым из символов, Am изображение того, что вам нужно вывести, будет хорошим, если возможно рабочим примером!
Naren Murali 18 сен. 2017, в 15:29
0

Образец изображения Да, он должен быть вертикальным.
IDN_Christian 19 сен. 2017, в 02:21

Теги:

javascript

chart.js2

1 ответ

Ещё вопросы

Вы хотите, чтобы надписи были вертикальными? У вас есть это `3 5, 4 0 0`. Значит ли это, что метки должны иметь пробел между каждым из символов, Am изображение того, что вам нужно вывести, будет хорошим, если возможно рабочим примером!
Образец изображения Да, он должен быть вертикальным.

Naren Murali · Accepted Answer · 2017-09-19T01-47-00.000Z

После выполнения этого требования я написал эту общую функцию для создания вертикальных меток, вот демонстрация функции вертикальной маркировки в действии.

JSFiddle Demo

Подробные сведения о параметрах функции вертикальной метки подробно описаны ниже.

function verticalLabel(ctx, data, dataToSplit, topOffset, spaceBetween, commaGap) {
  var i = 0, prev = 0;
  for (x of dataToSplit.toString().split("").reverse()) {
    if (x.indexOf(",") > -1) {
      ctx.fillText(x, data.x + commaGap, prev - topOffset);
    } else {
      ctx.fillText(x, data.x, data.y - spaceBetween * i - topOffset);
      i++;
    }
    var prev = data.y - spaceBetween * i;
  }
}

Вызов функции:

    this.datasets.forEach(function(dataset) {
      dataset.points.forEach(function(points) {
        console.log(points);
        verticalLabel(ctx, points, addCommas(points.value), 30, 10, 4);
      });
    })

Параметры:

ctx - переменная, содержащая строку (var ctx = document.getElementById("myChart1").getContext("2d"))
data - Это переменная, содержащая свойства label, value, x и y отдельных точек диаграммы.
dataToSplit - перед передачей данных в функцию мы можем сделать некоторые строковые манипуляции с данными. Мы можем передать конечную управляемую строковую переменную в этот параметр, и это преобразуется в вертикальную метку. Таким образом, в нашем примере выше мы передаем значение bar (это не что иное, как параметр данных нашей функции), через другую функцию, называемую addCommas() которая просто добавит addCommas() разделители в значение, наконец, это будет передано основной функции, которая показать результат этого результата как вертикальное число.
topOffset - этот параметр используется для установки расстояния от вершины точки, это может иметь любое число, предоставляемое его числовым типом данных и его целым числом!
spaceBetween - этот параметр используется для установки расстояния между символами значения точек (data), это может иметь любое число, обеспечивающее его числовой тип данных и его целое число! Этот параметр не применяется к запятой в data.
commaGap - этот параметр используется для установки расстояния между символами перед запятой и фактической запятой, вы можете думать об этом как о повышении удобочитаемости запятой, увеличивая пространство перед запятой (Eg 9, can be represented as 9 ,), это может иметь любое число, обеспечивающее его числовой тип данных и его целое число! Этот параметр не применяется к запятой в data.

это почти там, вертикальные метки должны быть внутри вертикальных полос. Как я это сделаю? Спасибо за полный ответ.
@IDN_Christian Вам просто нужно изменить параметр topOffset на -30 как, например, verticalLabel(ctx, points, addCommas(points.value), -30, 10, 4);
Я только что реализовал ваш код сегодня. Единственная проблема заключается в том, что если рядом находится верхняя полоса, набор данных переполнится, и я не вижу весь набор данных. Я хочу вставить набор данных в панель, когда она находится рядом с верхней частью, но я все еще не могу сделать это самостоятельно. @Нарен Мурали