3

Доброго времени суток. Есть проблема - графики на chart.js, все работает, как надо, но потребовалось над каждым столбцом диаграммы выводить значение самого столбца (значение по оси y). В ответах на этом-же stackoverflow есть несколько решений, но для версии chart.js < 2, т.е. на последних ничего подобное не хочет запускаться :(

Вот я примерно накидал маленькую диаграмму, если у кого есть решение - поделитесь - https://jsfiddle.net/fpsx4jy3

var densityCanvasS = document.getElementById("densityChartS");

var densityData = {	
  data: [47.1,34.05],
  backgroundColor: '#107410' 
};


var chartOptions = {
  legend: {
	  display: false,

  labels: {
            boxWidth: 10,
            fontColor: 'rgb(255, 10, 10)'
          }	  
  },
  scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
										scaleStartValue:0
                		}
            			}],
						 xAxes: [{
            			barThickness : 60
      				  }]
        }

};


var barChart = new Chart(densityCanvasS, {
  type: 'bar',
  data: {
    labels: ['Магазин 1','Магазин 2'],
    datasets: [densityData]
  },
  options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<div style='max-width:1000px;'><canvas id="densityChartS"> </canvas></div>

1 ответ 1

1

Вот пример который вы хотели:

var densityCanvasS = document.getElementById("densityChartS");

var densityData = {	
  data: [47.1,34.05],
  backgroundColor: '#107410' 
};

var data_max = Math.max(...densityData.data) + 10;

var barChart = new Chart(densityCanvasS, {
  type: 'bar',
  data: {
    labels: ['Магазин 1','Магазин 2'],
    datasets: [densityData]
  },
  options: {
    "hover": {
      "animationDuration": 0
    },
    "animation": {
        "duration": 1,
        "onComplete": function() {
            var chartInstance = this.chart,
            ctx = chartInstance.ctx;

            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function(dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    },
    legend: {
        "display": false
    },
    tooltips: {
        "enabled": false
    },

    scales: {
      yAxes: [{
        display: false,
        gridLines: {
          display: false
        },
        ticks: {
          max: data_max,
          display: false,
          beginAtZero: true
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<div style='max-width:1000px;'><canvas id="densityChartS"> </canvas></div>

Еще я взял максимальное значение колонок. Затем внутри оси y установил максимальные галочки как максимальное значение + 10 из вашего набора данных. Это гарантирует, что верхние столбцы на графике не будут уходить с края холста, И всегда будут видны на графике.

1
  • Все работает, спасибо огромное!
    – Crasher
    Commented 27 июн. 2017 в 12:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.