Chart.js - Menulis Label di Dalam Batang Horizontal?

Di Chart.js, apakah ada cara untuk menulis label di dalam batang horizontal pada bagan "horizontalBar"? Seperti dalam sesuatu seperti:

grafik ini

Apakah hal serupa mungkin terjadi di Chart.js?

Terima kasih!


javascript chart.js labels
person antonin_scalia    schedule 28.07.2016    source sumber
comment
saya mengacaukan perubahan label pada grafik garis selama seminggu penuh, ini sepertinya tidak sulit, tapi semoga berhasil   -  person Scott Selby    schedule 28.07.2016

Jawaban (5)


arrow_upward
26
arrow_downward

Sekarang ada opsi "cermin" untuk membuat label muncul di dalam bilah.

Contoh konfigurasi "opsi" untuk diagram Batang horizontal :

options: {
    scales: {
        yAxes: [{ticks: {mirror: true}}]
    }
}

Dokumen : http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration

person Elie    schedule 08.11.2016
comment
Dalam dokumentasi kutu dikatakan bahwa ini hanya untuk skala vertikal. Apakah Anda yakin ini berfungsi secara horizontal? - person crthompson; 10.03.2017
comment
Saya tidak bisa menunjukkan kepada Anda dasbor yang saya buat, tapi ya, ini juga berfungsi untuk diagram batang horizontal. - person Elie; 11.03.2017
comment
Ini hanya berfungsi untuk yAxis, jadi Anda hanya dapat menampilkan label Anda di dalam bilah jika label tersebut sejajar secara horizontal. - person bonbon; 11.07.2017

arrow_upward
9
arrow_downward

Dengan mengacu pada solusi asli untuk menampilkan nilai data dengan menggunakan Metode HTML5 Canvas fillText() di animation's onComplete, kode di bawah ini akan memberikan apa yang Anda butuhkan:

Kunci untuk menampilkan data terkait bagan apa pun secara khusus adalah dengan memeriksa kumpulan data bagan seperti pada this.data.datasets di bawah. Saya melakukan ini dengan memeriksa lokasi nilai-nilai yang berbeda dalam kumpulan data ini, serta posisi penempatannya untuk metode fillText.

Memeriksa kumpulan data diagram: Gambar

Skrip (Chart.js 2.0 dan lebih tinggi):

var barOptions = {
      events: false,
        showTooltips: false,
      legend: {
        display: false
      },
      scales:{
        yAxes: [{
          display: false
        }]
      },
        animation: {
        onComplete: function () {
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
              var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                  left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
              ctx.fillStyle = '#444'; // label color
              var label = model.label;
              ctx.fillText(label, left + 15, model.y + 8);
            }
          });               
        }
        }
    };

jsFiddle: http://jsfiddle.net/jfvy12h9/

person Hung Tran    schedule 05.08.2016
comment
tes cepat menunjukkan itu berhasil. namun, label hilang saat mengarahkan kursor dan menampilkan tip alat. ada solusi untuk ini? - person benzkji; 25.04.2019
comment
menambahkan ke hover: { animationDuration: 1 } menonaktifkan animasi tooltips, tetapi menyelesaikan masalah kedipan/hidup/mati... - person benzkji; 25.04.2019

arrow_upward
3
arrow_downward

Anda dapat mencapai efek ini di chartjs 2.0+ dengan memutar label 90 derajat dan menerapkan padding negatif, sehingga label bergerak ke atas di dalam 'batang'. Sesuatu seperti ini:

new Chart(document.getElementById(id), {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            maxRotation: 90,
            minRotation: 90,
            padding: -110
          }
        }
      ]
    }
  }
});

Lihat dokumentasi konfigurasi centang untuk informasi lebih lanjut.

person omnikron    schedule 05.10.2017
comment
Terima kasih. Untuk tick horizontal (sumbu x) padding negatif padding: -30 cukup untuk memindahkannya ke atas di dalam area grafik. Tidak perlu rotasi (chart.js v2.9.4). - person Patronaut; 06.11.2020

arrow_upward
0
arrow_downward

Sepertinya tidak ada pilihan langsung untuk hal ini saat ini. Implementasi yang mungkin dilakukan adalah mengulangi batang/kolom dengan menggunakan kait onAnimationComplete. Anda dapat melihat pertanyaan ini untuk penjelasan mendetail cara menampilkan nilai data pada Bagan. js

Saya ingin Anda mengingatkan bahwa ini memiliki kelemahan. Karena menggunakan onAnimationComplete, setiap kali animasi terjadi pada grafik, nilai akan hilang sesaat dan muncul kembali.

person Kubilay Karpat    schedule 30.07.2016

arrow_upward
0
arrow_downward

Karena pada grafik "batang" tidak berfungsi opsi "cermin"...

Saya telah menemukan solusi solusinya: Tautan biola

Saya menggunakan versi chart.js 2.8.0 yang dimodifikasi di tautan ini

<html>
    <body>
        <canvas id="myChart" width="800" height="600">
        </canvas>
    </body>
</html>





var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT"],
datasets: [{
    label: "Quota Eni mensile",
    backgroundColor: [
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)"
    ],
    borderColor: [
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)"
    ],
    borderWidth: 1,
    data: [10, 11, 18, 10, 13, 28, 12, 16]
  }
  ]
},
options: {
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            ticks:{
                maxRotation: 90,
                minRotation: 90,
                display: "top"
             },          
         }],
         yAxes: [{
             display: false
         }]
     },
     tooltips: {
         enabled: true
     },
     maintainAspectRatio: true,
     responsive: true
 }

});

Chart.plugins.register({
/* Adjust axis labelling font size according to chart size */
  id: "responsiveXlabels",
  beforeDraw: function(c) {
      var chartHeight = c.chart.height;
      var size = (chartHeight * 2.5) / 100;
      var xAxis = c.scales["x-axis-0"];
      xAxis.options.ticks.minor.fontSize = size;
      xAxis.height = 10;
      xAxis.minSize.height = 10;
      c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
      xAxis.margins.bottom = size * 12.5;
  },
  afterDraw: function(c) {
      c.options.scales.xAxes[0].ticks.padding = -158;
  }

});

plugin responsiveXlabel digunakan untuk mengubah teks saat diubah ukurannya. Hanya ada satu hal yang harus diselesaikan: menyelaraskan teks di bagian bawah sumbu.

Semoga ini bisa membantu yang ingin mengimplementasikan mirroring pada X Axis dan memenuhi permintaan responsif.

person erikthered65    schedule 09.08.2019