Penerangan terperinci pilihan konfigurasi Highcharts
Highcharts menyediakan sejumlah besar parameter pilihan konfigurasi Anda boleh menyesuaikan carta dengan mudah yang memenuhi keperluan pengguna Bab ini memperkenalkan penggunaan pilihan konfigurasi Highcharts secara terperinci:
. Konfigurasi parameter (Properties + Events)
chart.events.addSeries: Tambahkan siri pada carta.
carta.events.click: Klik acara yang berlaku pada kawasan lukisan seluruh carta.
carta.events.load: Acara memuatkan carta.
carta.events.redraw: Carta acara lukis semula, yang boleh dicetuskan apabila legenda diklik untuk menunjukkan dan menyembunyikan lukisan.
carta.events.selection: Apabila keluk carta boleh dibesarkan secara terpilih, peristiwa ini boleh dicetuskan apabila operasi carta dipilih.
carta.height: Nilai ketinggian carta yang dilukis.
carta.terbalikkan: Paksi x dan y dalam carta disongsangkan.
carta.polar: Sama ada carta kutub.
carta.reflow: Apabila saiz tetingkap berubah, lebar carta menyesuaikan diri dengan perubahan saiz tetingkap.
carta.renderTo: Kedudukan tempat carta dimuatkan ialah objek DOM pada halaman.
carta.showAxes: Dalam carta kosong, sama ada mahu memaparkan paksi koordinat.
carta.jenis: jenis carta, lalai ialah garisan dan bar/lajur/pai...
carta.lebar: carta lebar kawasan lukisan, lalai adalah adaptif.
carta.zoomType: Jenis zum laporan data dalam carta Anda boleh mengezum masuk pada paksi-X, paksi-Y atau kedua-duanya.
warna: Apabila terdapat berbilang lajur dalam carta, warna antara lajur. Ia adalah tatasusunan dan secara amnya tidak bergerak.
credits.enabled: Sama ada untuk membenarkan paparan maklumat hak cipta.
credits.href: Pautan hak cipta.
credits.text: teks paparan maklumat hak cipta.
exporting.buttons.exportButton.enabled: Sama ada untuk membenarkan butang eksport dipaparkan.
exporting.buttons.exportButton.menuItems: Pilihan menu untuk butang eksport.
exporting.buttons.exportButton.onclick: Eksport butang klik acara, bukan menu dalaman.
exporting.buttons.printButton.enabled: Sama ada untuk membenarkan butang pencetakan.
exporting.buttons.printButton.onclick: Acara klik butang cetak.
mengeksport.didayakan: Sama ada butang cetak dan eksport dibenarkan.
exporting.filename: Nama fail bagi fail yang dieksport.
exporting.type: Format fail lalai untuk mengeksport imej.
exporting.url: Alamat pemprosesan antara muka untuk menukar dan mengeksport carta SVG.
exporing.width: Lebar lalai bagi imej yang dieksport.
label: Label, yang boleh dimuatkan ke mana-mana kedudukan dalam carta dan mengandungi item serta gaya.
lang: Konfigurasi parameter bahasa, konfigurasi yang berkaitan dengan menu butang eksport, konfigurasi nama masa, dsb.
legend.enabled: Sama ada untuk membenarkan legenda.
navigation.buttonOptions.enabled: Sama ada butang dalam semua navigasi dalam carta boleh diklik.
plotOptions.area.allowPointSelect: Sama ada untuk membenarkan klik pada titik data.
plotOptions.area.color: Warna plot.
plotOptions.area.dataLabels.enabled: Sama ada untuk membenarkan label data.
plotOptions.area.enableMouseTracking: Sama ada untuk membenarkan paparan buih penjejakan tetikus untuk titik data dalam carta data.
plotOptions.area.events.checkboxKlik: Peristiwa klik pada kotak semak dalam legenda dalam carta data.
plotOptions.area.events.click: Peristiwa klik titik data dalam carta data.
plotOptions.area.events.hide: Peristiwa apabila siri data tertentu disembunyikan dalam carta data.
plotOptions.area.events.show: Peristiwa apabila siri data tertentu dipaparkan dalam carta data.
plotOptions.area.events.legendItemClick: Dalam carta data, peristiwa berlaku apabila item dalam legenda diklik Jika ia ditetapkan secara langsung palsu, ia tidak akan dapat diklik.
plotOptions.area.events.mouseOut: Acara keluar tetikus untuk titik data.
plotOptions.area.events.mouseOver: tetikus ke atas acara untuk titik data.
plotOptions.area.marker.enabled: Sama ada mahu memaparkan penanda mata dalam plot dalam carta.
plotOptions.area.marker.states.hover.enabled: Sama ada hendak membenarkan tetikus melepasi keadaan penanda.
plotOptions.area.marker.states.select.enabled: Sama ada untuk membenarkan keadaan pemilihan penanda.
plotOptions.area.point.events.click: Setiap peristiwa klik titik individu dalam carta.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove: Peristiwa apabila titik dalam carta dipadamkan.
plotOptions.area.point.events.select: Acara pemilihan titik carta.
plotOptions.area.point.events.unselect: Peristiwa apabila titik dalam carta dinyahpilih.
plotOptions.area.point.events.update: Peristiwa apabila data dalam carta dikemas kini.
plotOptions.area.visible: Semasa memuatkan, sama ada siri data dipaparkan atau disembunyikan secara lalai.
plotOptions.area.zIndex: Dalam kes berbilang jujukan, laraskan susunan susunan bagi setiap jujukan.
Peristiwa titik di atas juga boleh digunakan pada carta kawasan lain (julat luas, garis kawasan, julat luas), histogram lain (bar, lajur) dan semua carta.
plotOptions.area.showInLegend: Sama ada mahu dipaparkan dalam legenda.
plotOptions.area.stacking: Sama ada hendak disusun mengikut nilai atau peratusan.
plotOptions.area.states.hover.enabled: Sama ada keadaan tempat tetikus diletakkan dibenarkan.
plotOptions.area.stickyTracking: Titik data pengesanan melekit tetikus.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange adalah serupa dengan plotOptions.area
plotOptions.bar.groupPadding: untuk histogram Kumpulan , selang antara setiap kumpulan.
plotOptions.bar.grouping: Sama ada hendak mengumpulkan data.
plotOptions.bar.minPointLength:: Mentakrifkan panjang minimum titik apabila nilai titik ialah sifar
plotOptions.bar.showInLegend: Sama ada ia Ditunjukkan dalam legenda.
plotOptions.bar.stacking: Sama ada hendak disusun mengikut nilai atau peratusan (normal/peratus).
plotOptions.column, plotOptions.columnrange adalah serupa dengan plotOptions.bar
Konfigurasi plotOptions.line yang berkaitan adalah serupa dengan plotOptions.area konfigurasi.
plotOptions.pie.ignoreHiddenPoint: Dalam carta pai, selepas siri tertentu disembunyikan dengan mengklik pada legenda, sekiranya keseluruhan carta pai diagihkan semula kepada 100%, atau hanya berdasarkan carta asal? Tersembunyi di atas, menunjukkan jurang.
plotOptions.pie.innerSize: Semasa melukis carta pai, berapa banyak ruang yang perlu ditinggalkan di tengah carta pai.
plotOptions.pie.slicedOffset: Digunakan bersama allowPointSelect, apabila satu titik diklik, sektor yang sepadan dikupas Parameter ini adalah jarak dari konfigurasi.
Parameter konfigurasi biasa lain plotOptions.pie adalah serupa dengan plotOptions.area, plotOptions.scatter, plotOptions.series dan konfigurasi plotOptions.spline yang berkaitan adalah serupa dengan konfigurasi plotOptions.area .
siri: ialah tatasusunan.
siri.data.warna: Warna data tertentu.
series.data.dataLabels: Label data untuk data tertentu dalam siri.
siri.data.events adalah serupa dengan konfigurasi plotOptions.area.point.events yang berkaitan.
seri.data.marker adalah serupa dengan konfigurasi plotOptions.area.marker yang berkaitan.
series.data.name: konfigurasikan nama titik data.
siri.data.dihiris: Konfigurasikan jarak pemisahan sektor dalam carta pai.
siri.data.x: nilai x titik.
siri.data.y: nilai y titik.
siri.nama: Nama siri data.
siri.tindanan: indeks kumpulan bertindan.
siri.jenis: Paparan jenis siri data.
siri.xAxis, series.yAxis: Apabila menggunakan berbilang paksi koordinat, nyatakan paksi koordinat yang sepadan dengan jujukan tertentu.
sari kata: Konfigurasikan sari kata carta.
tajuk: Konfigurasikan tajuk carta.
petua alat: Konfigurasikan petua gelembung untuk data dalam carta.
tooltip.valueDecimals: Bilangan titik perpuluhan yang dibenarkan.
tooltip.percentageDecimals: Bilangan tempat perpuluhan dibenarkan untuk peratusan.
xAxis, tetapan konfigurasi yAxis koordinat paksi
allowDecimals: sama ada perpuluhan dibenarkan pada paksi koordinat.
kategori: Ia ialah tatasusunan, pengelasan paksi koordinat.
Garis plot: Lukis garisan utama.
warna semak: warna semak.
selang tanda: Nilai langkah skala.
labels.rotation: darjah putaran label skala
Carta: pilihan kawasan carta
Pilihan kawasan carta carta digunakan untuk tetapkan sifat berkaitan kawasan Carta.
参数 | 描述 | 默认值 |
---|---|---|
backgroundColor | 设置图表区背景色 | #FFFFFF |
borderWidth | 设置图表边框宽度 | 0 |
borderRadius | 设置图表边框圆角角度 | 5 |
renderTo | 图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值 | null |
defaultSeriesType | 默认图表类型line, spline, area, areaspline, column, bar, pie , scatter | 0 |
width | 图表宽度,默认根据图表容器自适应宽度 | null |
height | 图表高度,默认根据图表容器自适应高度 | null |
margin | 设置图表与其他元素之间的间距,数组,如[0,0,0,0] | [null] |
plotBackgroundColor | 主图表区背景色,即X轴与Y轴围成的区域的背景色 | null |
plotBorderColor | 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 | null |
plotBorderWidth | 主图表区边框的宽度 | 0 |
shadow | 是否设置阴影,需要设置背景色backgroundColor。 | false |
reflow | 是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小。 | true |
zoomType | 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:'x','y','xy' | '' |
events | 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数。 |
Warna: Pilihan warna
Pilihan warna digunakan untuk menetapkan skema warna carta.
参数 | 描述 | 默认值 |
color | 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。 | array |
Carta tinggi telah menyediakan berbilang skema warna secara lalai Apabila terdapat lebih banyak grafik untuk dipaparkan daripada jenis warna, grafik tambahan akan dipilih secara automatik daripada skema warna pertama. Kaedah untuk menyesuaikan skema warna:
Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] });
Tajuk: Pilihan tajuk
Pilihan tajuk tajuk digunakan untuk menetapkan sifat berkaitan tajuk carta.
参数 | 描述 | 默认值 |
---|---|---|
text | 标题文本内容。 | Chart title |
align | 水平对齐方式。 | center |
verticalAlign | 垂直对齐方式。 | top |
margin | 标题与副标题之间或者主图表区间的间距。 | 15 |
floating | 是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用。 | false |
style | 设置CSS样式。 | {color: '#3E576F', fontSize: '16px'} |
Sari kata: Pilihan sari kata
Pilihan atribut yang disediakan oleh sari kata adalah lebih kurang sama dengan tajuk Anda boleh merujuk kepada pilihan tajuk di atas bahawa pilihan teks sari kata lalai kepada '', yang kosong, jadi sari kata tidak dipaparkan secara lalai.
xAxis: Pilihan paksi X
Pilihan paksi X digunakan untuk menetapkan sifat berkaitan paksi X carta.
参数 | 描述 | 默认值 |
---|---|---|
categories | 设置X轴分类名称,数组,例如:categories: ['Apples', 'Bananas', 'Oranges'] | [] |
title | X轴名称,支持text、enabled、align、rotation、style等属性 | |
labels | 设置X轴各分类名称的样式style,格式formatter,角度rotation等。 | array |
max | X轴最大值(categories为空时),如果为null,则最大值会根据X轴数据自动匹配一个最大值。 | null |
min | X轴最小值(categories为空时),如果为null,则最小值会根据X轴数据自动匹配一个最小值。 | array |
gridLineColor | 网格(竖线)颜色 | #C0C0C0 |
gridLineWidth | 网格(竖线)宽度 | 1 |
lineColor | 基线颜色 | #C0D0E0 |
lineWidth | 基线宽度 | 0 |
yAxis: Pilihan paksi-Y
Pilihan paksi-Y pada asasnya sama dengan pilihan xAxis di atas Sila rujuk tetapan parameter dalam jadual di atas dan tidak akan disenaraikan secara berasingan.
Siri: Pilihan lajur data
Pilihan lajur data digunakan untuk menetapkan sifat yang berkaitan dengan data untuk dipaparkan dalam carta.
参数 | 描述 | 默认值 |
---|---|---|
data | 显示在图表中的数据列,可以为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] | '' |
name | 显示数据列的名称。 | '' |
type | 数据列类型,支持 area, areaspline, bar, column, line, pie, scatter or spline | line |
plotOptions: Pilihan titik data
plotOptions digunakan untuk menetapkan sifat yang berkaitan dengan titik data dalam carta. plotOptions mempunyai tetapan harta yang sedikit berbeza mengikut pelbagai jenis carta Pilihan biasa kini disenaraikan.
参数 | 描述 | 默认值 |
enabled | 是否在数据点上直接显示数据 | false |
allowPointSelect | 是否允许使用鼠标选中数据点 | false |
formatter | 回调函数,格式化数据显示内容 | formatter: function() {return this.y;} |
Petua alat: Kotak gesaan titik data
Petua alat digunakan untuk menetapkan maklumat kotak gesaan yang dipaparkan apabila tetikus meluncur ke arah titik data.
参数 | 描述 | 默认值 |
enabled | 是否显示提示框 | true |
backgroundColor | 设置提示框的背景色 | rgba(255, 255, 255, .85) |
borderColor | 提示框边框颜色,默认自动匹配数据列的颜色 | auto |
borderRadius | 提示框圆角度 | 5 |
shadow | 是否显示提示框阴影 | true |
style | 设置提示框内容样式,如字体颜色等 | color:'#333' |
formatter | 回调函数,用于格式化输出提示框的显示内容。返回的内容支持html标签如:<b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
Legenda: Pilihan lagenda
legenda digunakan untuk menetapkan sifat berkaitan legenda.
参数 | 描述 | 默认值 |
---|---|---|
layout | 显示形式,支持水平horizontal和垂直vertical | horizontal |
align | 对齐方式。 | center |
backgroundColor | 图例背景色。 | null |
borderColor | 图例边框颜色。 | #909090 |
borderRadius | 图例边框角度 | 5 |
enabled | 是否显示图例 | true |
floating | 是否可以浮动,配合x,y属性。 | false |
shadow | 是否显示阴影 | false |
style | 设置图例内容样式 | '' |
Untuk butiran lanjut, sila rujuk dokumentasi bahasa Inggeris di laman web rasmi highcharts: http://api.highcharts.com/highcharts