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
    27 июн 2017 в 12:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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