Chart.js - Как сместить бары от ZeroLine - PullRequest
Новая
       14

Chart.js - Как сместить бары от ZeroLine

0 голосов
/ 04 октября 2018

Я уже часами пытался понять, как сместить горизонтальные полосы от нулевой линии на оси X, чтобы они не перекрывались, когда ширина линии больше 1.

Оцените всю помощь.

Пример здесь на CodePen (надеюсь, он появится): https://codepen.io/RomanKl/pen/mzmegG

var barOptions = {
tooltips: {
    enabled: false
},
hover :{
    animationDuration:0
},
scales: {
    xAxes: [{
        ticks: {
            beginAtZero:true,
          min: 0,
          max: 10000,
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize:12,
          callback: function(value, index, values) {
                    return Math.round(value/1000) + 'k';
          }
        },
        scaleLabel:{
            display:false
        },
        gridLines: {
          color: ['#000', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef'],
          lineWidth: [4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          zeroLineWidth: 4,
          zeroLineColor: '#000',

        }, 
    }],
    yAxes: [{
        gridLines: {
          display: false,
        },
        ticks: {
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize:14,
        },

    }]
},
legend:{
    display:false
},

animation: {
    onComplete: function () {
        var chartInstance = this.chart;
        var ctx = chartInstance.ctx;
        ctx.textAlign = "left";
        ctx.font = "1.6rem Open Sans";
        ctx.fillStyle = "#fff";

        Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            Chart.helpers.each(meta.data.forEach(function (bar, index) {
                data = dataset.data[index];
              data = data.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                if(i==0){
                    ctx.fillText(data, 80, bar._model.y+4);
                } else {
                    ctx.fillText(data, bar._model.x-25, bar._model.y+4);
                }
            }),this)
        }),this);
    }
},

};

var ctx = document.getElementById("Chart1");

var myChart = новая диаграмма (ctx, {type: 'HorizontalBar', borderSkipped: 'bottom', данные: {метки: ["Aug.'17", "Aug. '18 "], 

    datasets: [{
        data: [6336, 6892],
        backgroundColor: "rgba(63,103,126,1)",
        hoverBackgroundColor: "rgba(50,90,100,1)"
    }]
},

options: barOptions,

});

1 Ответ

0 голосов
/ 05 октября 2018

Так что я жестоко взломал его в конце концов.Я попытался добавить границу, а затем пропустить ее везде, кроме начала, где я бы установил прозрачный цвет, но угадайте, что?Граница не появляется в начале.Это запрошенная функция, еще не реализованная в chart.js на момент публикации.

В конце я использовал дьявольское решение: использовать два набора данных в стеке, устанавливая первый набор данных с помощью данных с желаемым смещением, а затем устанавливая backgroundColor на прозрачный и смещая метки данных влево с помощью плагина.

Вы можете увидеть результат в ссылке на коде, размещенной в вопросе.

...