Saya ingin mengatur ketinggian legenda secara dinamis, jadi ketika wadah diubah ukurannya, ketinggian legenda akan disesuaikan secara otomatis. Idealnya, tinggi legenda harus setengah dari tinggi wadah bagan.

Biola: https://jsfiddle.net/rredondo/awac1dw8/

Perhatikan bahwa saat wadah semakin kecil, area plot bagan juga menjadi lebih kecil hingga menghilang karena legenda mengambil tempat. Ini adalah perilaku yang ingin saya hindari. Juga, saya mencoba mengatur maxHeight ke beberapa nomor. Masalah dengan pendekatan ini adalah tidak dinamis, dan menghabiskan banyak ruang jika nilainya terlalu kecil.

Opsi legenda adalah:

legend: {
       align: 'center',
       verticalAlign: 'bottom',
       layout: 'vertical',
       enabled: true,
       //maxHeight: 150
},

Tata letak harus diatur ke vertikal, dan legenda harus diposisikan di bawah bagan.

2
losaliens 8 Agustus 2017, 15:55

2 jawaban

Jawaban Terbaik

Berikut adalah solusi yang menggunakan legend.update() pada setiap penggambaran ulang bagan (juga diluncurkan setelah bagan dirender): https://jsfiddle.net/kkulig/2s8dnk6f/

Fungsi adjustLegendHeight menyetel legend.maxHeight menjadi setengah dari tinggi bagan:

function adjustLegendHeight(chart) {
  console.log(chart);
  chart.legend.update({
     maxHeight: chart.chartHeight / 2
  });
}

Perhatikan bahwa fungsi update mengaktifkan redraw di dalam dirinya sendiri. Untuk mencegah panggilan rekursif tak terbatas, saya menggunakan variabel global yang mengontrol gambar:

events: {
  redraw: function() {
    if (redrawingEnabled) {
        // disable redrawing to prevent infinite recursive redraw() loop (update() fires redraw by default)
      redrawingEnabled = false; 

      adjustLegendHeight(this);

      // enable redrawing after update and redraw are finished
      redrawingEnabled = true; 
    }
  }
}
let redrawingEnabled = true;

function adjustLegendHeight(chart) {
  chart.legend.update({
    maxHeight: chart.chartHeight / 2
  });
}

var chart = Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie',
    events: {
      redraw: function() {
        if (redrawingEnabled) {
        	// disable redrawing to prevent infinite recursive redraw() loop (update() fires redraw by default)
          redrawingEnabled = false; 
          
          adjustLegendHeight(this);
     
          // enable redrawing after update and redraw are finished
          redrawingEnabled = true; 
        }
      }
    }
  },
  title: {
    text: ''
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      }
    }
  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    layout: 'vertical',
    enabled: true
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    showInLegend: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 10.38
    }, {
      name: 'Safari',
      y: 4.77
    }, {
      name: 'Opera',
      y: 0.91
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2
    }, {
      name: 'Microsoft Internet Explorer',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 10.38
    }, {
      name: 'Safari',
      y: 4.77
    }, {
      name: 'Opera',
      y: 0.91
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2
    }, {
      name: 'Microsoft Internet Explorer',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 10.38
    }, {
      name: 'Safari',
      y: 4.77
    }, {
      name: 'Opera',
      y: 0.91
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2
    }]
  }]
});

adjustLegendHeight(chart);
#container {
  height: 100%;
  width: 250px;
  position: absolute;
}
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
3
blewherself 9 Agustus 2017, 10:47

Pertama-tama, sudahkah Anda mencoba menggunakan layout: 'horizontal' ? Ini membagi daftar item dalam legenda menjadi beberapa bagian, menunjukkan pagination yang cukup rapi dan berada di ruang yang relatif kecil.

Jika tidak, saya yakin untuk mengelola legenda bagan, Anda tidak memiliki opsi lain selain menggali ke dokumen API. Jika Anda melihat ke referensi API asalkan ada banyak opsi yang dapat Anda tentukan ke grafik Anda. Misalnya legend.lineHeight atau legend.margin dan lainnya yang dapat membantu mengubah ukuran wadah legenda.

Ada juga metode tunggal legend.update() di mana Anda dapat meneruskan objek dengan opsi baru untuk memperbarui legenda Anda saat diperlukan.

Jadi triknya adalah melacak ukuran wadah/jendela dan memperbaruinya dengan parameter yang diinginkan. Cara serupa untuk mengubah ukuran bagan dengan ChartJS di sini

1
blewherself 8 Agustus 2017, 13:27