Latest web development tutorials

Pilihan konfigurasi Highcharts dijelaskan secara rinci

Highcharts pilihan konfigurasi memberikan banyak parameter, Anda dapat dengan mudah disesuaikan untuk memenuhi kebutuhan pengguna grafik di bagian ini untuk mengetahui lebih lanjut opsi konfigurasi Highcharts untuk digunakan:

parameter konfigurasi (atribut + acara)

  1. chart.events.addSeries: Tambahkan jumlah kolom untuk grafik.

  2. chart.events.click: Klik pada acara seluruh plot daerah grafik terjadi.

  3. chart.events.load: Bagan beban acara.

  4. chart.events.redraw: grafik redraw acara, klik pada acara legenda dan dapat memicu gambar tersembunyi.

  5. chart.events.selection: Ketika kurva grafik dipilih zoom, pilih grafik ketika operasi dapat memicu acara.

  6. chart.height: grafik tinggi ditarik.

  7. chart.inverted: grafik x, y-axis di bursa.

  8. chart.polar: apakah grafik polar.

  9. chart.reflow: ketika perubahan ukuran jendela, lebar grafik adaptif perubahan ukuran jendela.

  10. chart.renderTo: memuat grafik, adalah objek DOM pada halaman.

  11. chart.showAxes: grafik kosong, apakah untuk menampilkan sumbu.

  12. chart.type: jenis bagan, garis default, ada bar / kolom / pie ......

  13. chart.width: lebar area plot grafik, default adalah adaptif.

  14. chart.zoomType: Jenis amplifikasi data dalam grafik laporan, Anda dapat memperbesar ke sumbu X atau zoom Y-axis, Anda dapat memperbesar XY sumbu secara bersamaan.

  15. warna: Kebanyakan kolom di grafik, jumlah kolom antara setiap warna. Adalah array, umumnya tidak bergerak.

  16. kredit .enabled: apakah untuk memungkinkan tampilan informasi hak cipta.

  17. credits.href: link hak cipta.

  18. credits.text: menampilkan teks informasi hak cipta.

  19. mengekspor .buttons.exportButton.enabled: apakah akan mengizinkan tombol Ekspor display.

  20. exporting.buttons.exportButton.menuItems: pilihan menu tombol Export.

  21. exporting.buttons.exportButton.onclick: tombol Ekspor diklik acara, tidak menu internal.

  22. exporting.buttons.printButton.enabled: apakah akan mengizinkan tombol Print.

  23. exporting.buttons.printButton.onclick: tombol print klik acara.

  24. exporting.enabled: Cetak dan Ekspor tombol diperbolehkan.

  25. exporting.filename: adalah nama file dari file ekspor.

  26. exporting.type: format file gambar ekspor Default.

  27. exporting.url: SVG grafik konversi dan alamat antarmuka pengolahan ekspor.

  28. exporing.width: lebar gambar ekspor default.

  29. label: label dapat dimuat ke posisi grafik, ada item, gaya.

  30. lang: bahasa parameter konfigurasi, dan konfigurasi yang berkaitan dengan menu tombol Export, nama dan waktu konfigurasi lainnya.

  31. legend.enabled: apakah memungkinkan Legend.

  32. navigation.buttonOptions.enabled: tombol navigasi grafik apakah semua yang bisa diklik.

  33. plotOptions .area.allowPointSelect: apakah untuk memungkinkan poin klik data.

  34. plotOptions.area.color: Menggambar warna.

  35. plotOptions.area.dataLabels.enabled: apakah akan mengizinkan label data.

  36. plotOptions.area.enableMouseTracking: apakah memungkinkan data dalam grafik, titik pelacakan mouse bubble data ditampilkan.

  37. plotOptions.area.events.checkboxClick: data dalam grafik legenda kotak centang klik event.

  38. plotOptions.area.events.click: grafik data, titik data klik acara.

  39. plotOptions.area.events.hide: grafik data, urutan data peristiwa ketika tersembunyi.

  40. plotOptions.area.events.show: grafik data, urutan data peristiwa ketika ditampilkan.

  41. plotOptions.area.events.legendItemClick: grafik data, legenda item acara diklik, tugas langsung palsu, tidak dapat diklik.

  42. plotOptions.area.events.mouseOut: Data tikus poin dari acara tersebut.

  43. plotOptions.area.events.mouseOver: titik data tikus setelah acara.

  44. plotOptions.area.marker.enabled: apakah untuk menampilkan tag titik grafik gambar.

  45. plotOptions.area.marker.states.hover.enabled: apakah akan mengizinkan negara tag rollover.

  46. plotOptions.area.marker.states.select.enabled: apakah mengizinkan status pemilihan tag.

  47. plotOptions.area.point.events.click: grafik setiap event point klik.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove: Event dihapus grafik poin digunakan.

  51. plotOptions.area.point.events.select: Pilih acara grafik titik tengah.

  52. plotOptions.area.point.events.unselect: Event grafik titik tengah ketika terpilih.

  53. plotOptions.area.point.events.update: pembaruan peristiwa terjadi ketika data pada grafik.

  54. plotOptions.area.visible: ketika loading default seri data akan ditampilkan atau disembunyikan.

  55. plotOptions.area.zIndex: Dalam kasus beberapa urutan, menyesuaikan urutan susun setiap urutan.

  56. Di atas point.events yang sama juga berlaku untuk daerah lain dari diagram kelas (arearange, areaspline, areasplinerange), lainnya histogram (bar, kolom) dan semua chart.

  57. plotOptions.area.showInLegend: apakah akan menampilkan dalam legenda.

  58. plotOptions.area.stacking: adalah nilai stack, stack atau sebagai persentase.

  59. plotOptions.area.states.hover.enabled: apakah untuk memungkinkan negara untuk menempatkan mouse.

  60. plotOptions.area.stickyTracking: tikus lengket titik data pelacakan.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange mirip dengan plotOptions.area yang

  62. plotOptions.bar.groupPadding: Untuk bar chart paket interval antara setiap paket.

  63. plotOptions.bar.grouping: apakah untuk kelompok data.

  64. plotOptions.bar.minPointLength :: Mendefinisikan nilai titik nol, titik panjang minimum untuk

  65. plotOptions.bar.showInLegend: apakah akan menampilkan dalam legenda.

  66. plotOptions.bar.stacking: adalah nilai dari stack, stack atau sebagai persentase (normal / persen).

  67. plotOptions.column, plotOptions.columnrange mirip dengan plotOptions.bar

  68. konfigurasi plotOptions.line terkait adalah konfigurasi plotOptions.area serupa.

  69. plotOptions.pie.ignoreHiddenPoint: Dalam pie chart, urutan tertentu dengan Legenda klik untuk menyembunyikan, seluruh pie chart adalah 100% re-tugas, atau disembunyikan hanya atas dasar aslinya, menunjukkan kesenjangan.

  70. plotOptions.pie.innerSize: Ketika menggambar diagram lingkaran, pusat pie chart untuk memesan banyak kosong.

  71. plotOptions.pie.slicedOffset: allowPointSelect digunakan dalam hubungannya dengan, ketika titik diklik, sektor kupas yang sesuai, ini parameter konfigurasi yang berjarak jauh.

  72. konfigurasi umum lainnya parameter plotOptions.pie kemiripan dengan plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline konfigurasi terkait konfigurasi plotOptions.area serupa.

  73. Seri: array.

  74. series.data.color: satu data warna.

  75. series.data.dataLabels: satu urutan data label data.

  76. series.data.events mirip dengan konfigurasi plotOptions.area.point.events.

  77. series.data.marker mirip dengan konfigurasi plotOptions.area.marker.

  78. series.data.name: nama titik data konfigurasi.

  79. series.data.sliced: Konfigurasi diagram lingkaran, jarak yang memisahkan ukuran sektor.

  80. series.data.x: x nilai titik.

  81. series.data.y: nilai y dari titik.

  82. series.name: nama urutan data.

  83. series.stack: ditumpuk indeks grup.

  84. series.type: urutan data jenis tampilan.

  85. series.xAxis, series.yAxis: bila menggunakan beberapa sumbu, menentukan yang sumbu sesuai dengan jumlah kolom.

  86. subtitle: Konfigurasi subtitle grafik.

  87. Judul: judul konfigurasi grafik.

  88. tooltip: Konfigurasi Data bubble cepat dalam grafik.

  89. tooltip.valueDecimals: Izinkan tempat desimal.

  90. tooltip.percentageDecimals: Izinkan persentase tempat desimal.

  91. pengaturan konfigurasi sumbu Xaxis, yAxis

  92. allowDecimals: apakah untuk memungkinkan desimal sumbu.

  93. kategori: array sumbu klasifikasi.

  94. plotlines: Gambarkan jalur utama.

  95. tickColor: skala warna.

  96. tickInterval: Langkah nilai skala.

  97. labels.rotation: skala label derajat rotasi

Grafik: option area bagan

Grafik grafik daerah pilihan grafik area digunakan untuk mengatur properti.

parameter deskripsi kegagalan
backgroundColor warna latar belakang pengaturan area bagan #FFFFFF
BorderWidth Mengatur lebar grafik perbatasan 0
borderRadius Pengaturan perbatasan, bulat sudut 5
renderTo Grafik menempatkan kontainer, umumnya ditempatkan di html DIV, dapatkan DIV nilai atribut id batal
defaultSeriesType Jenis grafik standar garis, spline, daerah, areaspline, kolom, bar, pie, scatter 0
lebar lebar grafik, menurut grafik wadah lebar standar adaptif batal
tinggi Tinggi grafik, wadah grafik default sesuai dengan sangat adaptif batal
batas Dan elemen lainnya dalam array grafik lapangan, seperti [0,0,0,0] [Null]
plotBackgroundColor warna latar belakang daerah grafik utama warna latar belakang, X dan sumbu Y dari daerah tertutup batal
plotBorderColor Warna wilayah perbatasan berbatasan dengan grafik utama, X dan sumbu Y dari daerah tertutup batal
plotBorderWidth Lebar perbatasan area bagan utama 0
bayangan Bayangan diatur, Anda perlu mengatur backgroundColor warna latar belakang. palsu
reflow Apakah menggunakan area grafik dari tinggi dan lebar, jika tidak diatur lebar dan tinggi, ukuran akan adaptif. benar
zoomType Tarik mouse untuk tampilannya, zoom sepanjang x atau sumbu y, dapat diatur untuk: 'x', 'y', 'xy' ''
peristiwa Acara callback metode dukungan addSeries, klik metode, metode beban, metode pemilihan fungsi callback.

Warna: Warna Pilihan

Pilihan warna untuk menetapkan skema warna bagan warna.

parameter deskripsi kegagalan
warna Untuk layar warna, array grafik, garis / bar / pie chart sebagainya. susunan

Highcharts sudah menyediakan beberapa skema warna default, ketika Anda ingin menampilkan grafis warna lebih dari baik, lebih grafis secara otomatis akan mulai dari pemilihan skema warna pertama. Pendekatan skema warna kustom: 

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Judul: Judul Pilihan

caption pilihan title digunakan untuk mengatur properti yang relevan dari judul grafik.

parameter deskripsi kegagalan
teks Judul teks. title grafik
meluruskan keselarasan horisontal. pusat
verticalAlign keselarasan vertikal. teratas
batas Antara judul utama dan subjudul atau grafik rentang pitch. 15
mengambang Apakah mengambang, jika benar, judul dapat offset dari daerah grafik utama, dengan x, y atribut. palsu
gaya Mengatur gaya CSS. {Color: '# 3E576F',
fontsize: '16px'}

Pilihan subtitle: Subtitle

Pilihan properti Subtitel menyediakan substansial judul yang sama dengan judul, judul dapat mengacu pada pilihan di atas, perlu menyebutkan bahwa standar pilihan teks subtitle untuk '', yang kosong, sehingga subtitle tersebut tidak ditampilkan secara default.

Xaxis: opsi sumbu X

Opsi X axis digunakan untuk mengatur grafik X-axis properti terkait.

parameter deskripsi kegagalan
kategori Mengatur nama kategori sumbu X, array, misalnya: kategori: [ 'Apel', 'Pisang', 'Jeruk'] []
judul Nama X Axis, dukungan teks, diaktifkan, menyelaraskan, rotasi, gaya dan atribut lainnya
label Mengatur sumbu X dari masing-masing nama kategori gaya gaya, format yang formatter, sudut rotasi dan sejenisnya. susunan
max X-axis nilai maksimum (kategori kosong), jika nol, maka nilai maksimum akan secara otomatis mencocokkan data X-axis untuk maksimal. batal
min minimum sumbu X (kategori kosong), jika nol, maka nilai minimum akan secara otomatis mencocokkan data X-axis untuk minimum. susunan
gridLineColor Grid (vertikal) Warna # C0C0C0
gridLineWidth Grid (bar vertikal) lebar 1
lineColor warna dasar # C0D0E0
linewidth Lebar garis dasar 0

Opsi sumbu Y: yAxis

Opsi Y-axis konsisten dengan pilihan Xaxis disebutkan di atas, silakan lihat tabel di pengaturan parameter tidak lagi tercantum secara terpisah.

Seri: Data Kolom Pilihan

Opsi Kolom Data digunakan untuk mengatur grafik untuk menampilkan data properti terkait.

parameter deskripsi kegagalan
data Ditampilkan dalam kolom data grafik, yang dapat berupa array atau data JSON diformat. Seperti: data: [0, 5, 3, 5], atau
Data: [{Nama: 'Titik 1', y: 0}, {nama: 'Titik 2', y: 5}] 		''
nama Menampilkan nama kolom data. ''
jenis tipe data kolom, dukungan daerah, areaspline, bar, kolom, garis, pie, scatter atau spline baris

plotOptions: Pilihan data titik

plotOptions digunakan untuk mengatur titik data grafik properti terkait. plotOptions Menurut berbagai jenis grafik, sifat mereka mengatur sedikit berbeda, sekarang opsi yang umum digunakan terdaftar.

parameter deskripsi kegagalan
diaktifkan Data ditampilkan langsung pada titik data palsu
allowPointSelect Apakah untuk memungkinkan penggunaan mouse untuk memilih titik data palsu
formatter fungsi callback, format tampilan data yang formatter: function () {kembali this.y;}

Tooltip: poin balon Data

Informasi Tooltip untuk pengaturan kotak prompt ketika titik tikus geser data ditampilkan.

parameter deskripsi kegagalan
diaktifkan Apakah akan menampilkan kotak prompt benar
backgroundColor Mengatur warna balon background RGBA (255, 255, 255, 0,85)
bordercolor Balon warna perbatasan, kolom default data secara otomatis mencocokkan warna mobil
borderRadius Balon sudut bulat 5
bayangan Apakah untuk menampilkan kotak bayangan yang cepat benar
gaya Pengaturan konten gaya balon, seperti warna font, dll Warna: '# 333'
formatter fungsi callback untuk memformat output display balon. dukungan kembali konten seperti tag html: <b>, <strong>, <i>, <em>, <br/>, <span> 2

Legenda: Option legenda

legenda legenda digunakan untuk mengatur properti.

parameter deskripsi kegagalan
tata ruang format tampilan, tingkat vertikal dan horizontal vertikal dukungan horisontal
meluruskan Keselarasan. pusat
backgroundColor Legenda warna latar belakang. batal
bordercolor Legenda warna perbatasan. # 909090
borderRadius sudut perbatasan legenda 5
diaktifkan Apakah akan menampilkan legenda benar
mengambang Aku bisa mengapung, dengan x, y properti. palsu
bayangan Apakah akan menampilkan bayangan palsu
gaya Isi dari gaya legenda ''

Untuk informasi lebih rinci, lihat situs resmi Highcharts dokumentasi Inggris: http://api.highcharts.com/highcharts