Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # Menggunakan Highcharts Gunakan visual Highcharts untuk membuat jenis grafik kustom dan visual yang menggunakan library [Highcharts](https://www.highcharts.com/blog/products/highcharts/) Core. Visual Highcharts memberikan akses langsung kepada penulis Cepat ke [Highcharts](https://api.highcharts.com/highcharts/) API. Untuk mengonfigurasi visual Highcharts, Quick author perlu menambahkan skema Highcharts JSON ke visual di Quick. Penulis dapat menggunakan ekspresi Cepat untuk mereferensikan bidang Cepat, dan opsi pemformatan dalam skema JSON yang mereka gunakan untuk menghasilkan visual Highcharts. Editor **kode Bagan** JSON memberikan bantuan kontekstual untuk pelengkapan otomatis dan validasi waktu nyata untuk memastikan bahwa skema JSON input dikonfigurasi dengan benar. Untuk menjaga keamanan, editor visual Highcharts tidak menerima CSS, JavaScript, atau input kode HTML. Untuk informasi selengkapnya tentang visual Highcharts di Amazon Quick, lihat Panduan [Visual QuickStart Highcharts](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) di. [DemoCentral](https://democentral.learnquicksight.online/#) Gambar berikut menunjukkan bagan lipstik yang dikonfigurasi dalam editor JSON **kode Chart** dari visual Highcharts di Quick. ![\[alt text not found\]](http://docs.aws.amazon.com/id_id/quick/latest/userguide/images/highcharts-example1.png) Untuk lebih banyak contoh visual yang dapat Anda buat dengan visual Highcharts di Quick, lihat demo [Highcharts](https://www.highcharts.com/demo). ## Pertimbangan-pertimbangan Sebelum Anda mulai membuat visual Highcharts di Amazon Quick, tinjau batasan berikut yang berlaku untuk visual Highcharts. + Nilai JSON berikut tidak didukung dalam editor JSON **kode Highcharts Chart**: + Fungsi + Tanggal + Nilai yang tidak ditentukan + Tautan ke file GeoJSON atau gambar lain tidak didukung untuk visual Highcharts. + Warna bidang tidak tersedia untuk visual Highcharts. Warna tema default diterapkan ke semua visual Highcharts. ## Membuat visual Highcharts Gunakan prosedur berikut untuk membuat visual Highcharts di Amazon Quick. 1. Buka [konsol Cepat](https://quicksight.aws.amazon.com/). 1. Buka analisis Cepat yang ingin Anda tambahkan visual Highcharts. 1. Pada bilah aplikasi, pilih **Tambah**, lalu pilih **Tambahkan visual**. 1. Pada panel **Jenis visual**, pilih ikon visual Highcharts. Visual kosong muncul di lembar analisis dan panel **Properties** terbuka di sebelah kiri. 1. Di panel **properti**, perluas bagian **Pengaturan tampilan** dan lakukan tindakan berikut: 1. **Untuk **Edit judul**, pilih ikon kuas, masukkan judul yang Anda inginkan untuk memiliki visual, dan kemudian pilih SIMPAN.** Atau, pilih ikon bola mata untuk menyembunyikan judul. 1. **(Opsional) Untuk **Edit subtitle**, pilih ikon kuas cat, masukkan subtitle yang Anda inginkan untuk visual, lalu pilih SIMPAN.** Atau, pilih ikon bola mata untuk menyembunyikan subtitle. 1. (Opsional) Untuk **teks Alt**, tambahkan teks alt yang Anda inginkan untuk memiliki visual. 1. Perluas bagian **Batas titik data**. Untuk **Jumlah titik data yang akan ditampilkan**, masukkan jumlah titik data yang ingin ditampilkan oleh visual. Visual Highcharts dapat menampilkan hingga 10.000 titik data. 1. Perluas bagian **Kode bagan**. 1. Masukkan skema JSON ke dalam editor JSON **kode Chart**. Editor memberikan bantuan kontekstual dan validasi waktu nyata untuk memastikan bahwa input JSON Anda dikonfigurasi dengan benar. Kesalahan apa pun yang diidentifikasi Cepat dapat dilihat di dropdown **Kesalahan**. Contoh di bawah ini menunjukkan skema JSON yang menciptakan bagan lipstik yang menunjukkan penjualan tahun berjalan menurut industri. ``` { "xAxis": { "categories": ["getColumn", 0] }, "yAxis": { "min": 0, "title": { "text": "Amount ($)" } }, "tooltip": { "headerFormat": "{point.key}", "pointFormat": "", "footerFormat": "
{series.name}: ${point.y:,.0f}
", "shared": true, "useHTML": true }, "plotOptions": { "column": { "borderWidth": 0, "grouping": false, "shadow": false } }, "series": [ { "type": "column", "name": "Current Year Sales", "color": "rgba(124,181,236,1)", "data": ["getColumn", 1], "pointPadding": 0.3, "pointPlacement": 0.0 } ] } ``` 1. Pilih **TERAPKAN KODE**. Cepat mengubah skema JSON menjadi visual yang muncul dalam analisis. **Untuk membuat perubahan pada visual yang dirender, perbarui properti yang sesuai dalam skema JSON dan pilih TERAPKAN KODE.** 1. (Opsional) Buka dropdown **Referensi** untuk mengakses tautan ke materi referensi Highctarts yang bermanfaat. Saat Anda puas dengan visual yang dirender, tutup panel properti. Untuk informasi selengkapnya tentang ekspresi spesifik Quick Sight yang dapat digunakan untuk mengonfigurasi visual Highcharts, lihat[Bahasa ekspresi Amazon Quick JSON untuk visual Highcharts](highchart-expressions.md). ## Fitur Highchart interaktif Visualisasi Highchart di Amazon Quick Sight mendukung tindakan kustom, penyorotan, dan konsistensi warna bidang khusus, memungkinkan Anda membuat bagan interaktif dan kohesif visual yang terintegrasi secara mulus dengan visual Quick Sight lainnya. ### Tindakan kustom Dengan tindakan kustom, Anda dapat menentukan perilaku tertentu untuk setiap titik data dalam visualisasi Highchart Anda. Fitur ini terintegrasi secara mulus dengan kerangka kerja tindakan Quick Sight yang ada, memungkinkan Anda membuat bagan interaktif yang merespons klik pengguna. Sistem saat ini mendukung pemilihan titik data tunggal, memberi Anda kontrol yang tepat atas interaksi pengguna. Tindakan khusus dapat diimplementasikan di berbagai jenis bagan, termasuk grafik garis, diagram batang, dan bagan batang bertumpuk, antara lain. Untuk menerapkan tindakan kustom, Anda harus memodifikasi konfigurasi Highcharts JSON Anda. Tambahkan blok acara ke konfigurasi seri Anda, tentukan peristiwa klik dan tindakan yang sesuai. Contoh: ``` { "series": [{ "type": "line", "data": ["getColumn", 1], "name": "value", "events": { "click": [ "triggerClick", { "rowIndex": "point.index" } ] } }] ``` Konfigurasi ini memungkinkan peristiwa klik pada titik data bagan Anda, memungkinkan Quick Sight untuk menangani tindakan kustom berdasarkan data yang dipilih. ### Penyorotan lintas visual Penyorotan lintas visual meningkatkan interaktivitas dasbor Anda dengan membuat koneksi visual antara bagan yang berbeda. Ketika pengguna memilih elemen dalam satu bagan, elemen terkait dalam visual lain secara otomatis disorot, sementara elemen yang tidak terkait diredupkan. Fitur ini membantu pengguna dengan cepat mengidentifikasi hubungan dan pola di berbagai visualisasi, meningkatkan pemahaman dan analisis data. Untuk mengaktifkan penyorotan lintas visual dan mempertahankan konsistensi warna bidang, gunakan `quicksight` klausa dalam konfigurasi Highcharts JSON Anda. Klausa ini bertindak sebagai jembatan antara rendering Highcharts dan sistem interaksi visual Quick. Berikut adalah contoh cara mengaturnya: ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["dataMarkMatch", ["getColumnName", 0], "series.name"], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"] }] } } ``` Konfigurasi ini menggunakan bahasa ekspresi JSON Quick Sight untuk memodifikasi properti visual secara dinamis seperti opacity dan color berdasarkan interaksi pengguna dan skema warna yang telah ditentukan sebelumnya. Untuk skenario yang lebih kompleks, Anda dapat mengatur penyorotan berdasarkan beberapa kondisi. Ini memungkinkan interaktivitas yang lebih bernuansa dalam visualisasi Anda. Contoh berikut menyoroti elemen berdasarkan kuartal atau hari dalam seminggu: ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["||", ["dataMarkMatch", "quarter", "series.name"], ["dataMarkMatch", "day_of_week", "point.name"] ], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], }] } } ``` ### Konsistensi warna tingkat lapangan Mempertahankan koherensi visual di seluruh dasbor Anda sangat penting untuk interpretasi data yang efektif. Fitur konsistensi warna tingkat lapangan memastikan bahwa warna yang ditetapkan ke dimensi tertentu berbeda di semua visual di dasbor Anda. Konsistensi ini membantu pengguna dengan cepat mengenali dan melacak kategori data tertentu di berbagai jenis dan tampilan bagan, meningkatkan pengalaman pengguna dan pemahaman data secara keseluruhan. # Bahasa ekspresi Amazon Quick JSON untuk visual Highcharts Visual Highcharts menerima [nilai JSON yang paling valid](https://www.w3schools.com/js/js_json_datatypes.asp), operator aritmatika standar, operator string, dan operator bersyarat. Nilai JSON berikut tidak didukung untuk visual Highcharts: + Fungsi + Tanggal + Nilai yang tidak ditentukan Penulis cepat dapat menggunakan bahasa ekspresi JSON membuat skema JSON untuk visual grafik tinggi. Bahasa ekspresi JSON digunakan untuk mengikat JSON ke APIs atau kumpulan data untuk memungkinkan populasi dinamis dan modifikasi struktur JSON. Pengembang juga dapat menggunakan bahasa ekspresi JSON untuk mengembang dan mengubah data JSON dengan ekspresi ringkas dan intuitif. Dengan bahasa ekspresi JSON, ekspresi direpresentasikan sebagai array, di mana elemen pertama menentukan operasi dan elemen berikutnya adalah argumen. Misalnya, `["unique", [1, 2, 2]]` menerapkan `unique` operasi ke array`[1, 2, 2]`, menghasilkan`[1, 2]`. Sintaks berbasis array ini memungkinkan ekspresi fleksibel, yang memungkinkan transformasi kompleks pada data JSON. Bahasa ekspresi JSON mendukung ekspresi *bersarang*. Ekspresi bersarang adalah ekspresi yang berisi ekspresi lain sebagai argumen. Misalnya `["split", ["toUpper", "hello world"], " "]` pertama mengubah string `hello world` menjadi huruf besar, kemudian membaginya menjadi array kata, menghasilkan. `["HELLO", "WORLD"]` Gunakan bagian berikut untuk mempelajari lebih lanjut tentang bahasa ekspresi JSON untuk visual Highcharts di Amazon Quick. **Topics** + [Aritmatika](jle-arithmetics.md) + [Operasi array](jle-arrays.md) + [Ekspresi Cepat Amazon](jle-qs-expressions.md) # Aritmatika Tabel berikut menunjukkan ekspresi aritmatika yang dapat digunakan dengan bahasa ekspresi JSON. | Operasi | Ekspresi | Input | Output | | --- | --- | --- | --- | | Penambahan | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | Pengurangan | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | Perkalian | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | Pembagian | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | Modulo | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | Eksponensiasi | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | Nilai Mutlak | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | Akar Kuadrat | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | Logaritma (basis 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | Logaritma Alami | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | Bulat | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | Lantai | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | Plafon | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | Sinus | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | Kosinus | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | Tangen | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # Operasi array Bahasa ekspresi JSON memungkinkan manipulasi array generik untuk fungsi-fungsi berikut: + `map`— Menerapkan fungsi pemetaan untuk setiap elemen array dan mengembalikan array baru dengan nilai-nilai yang diubah. Misalnya, `["map", [1, 2, 3], ["*", ["item"], 2]]` memetakan setiap elemen array `[1, 2, 3]` dengan mengalikannya dengan 2. + `filter`— Memfilter array berdasarkan kondisi tertentu dan mengembalikan array baru yang hanya berisi elemen yang memenuhi kondisi Misalnya, `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` memfilter array `[1, 2, 3, 4, 5]` untuk menyertakan hanya angka genap. + `reduce`— Mengurangi array ke nilai tunggal dengan menerapkan fungsi peredam untuk setiap elemen dan mengumpulkan hasilnya. Misalnya, `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` mengurangi array `[1, 2, 3, 4, 5]` ke jumlah elemen-elemennya. + `get`— Mengambil nilai dari objek atau array dengan menentukan kunci atau indeks. Misalnya, `["get", ["item"], "name"]` mengambil nilai `"name"` properti dari item saat ini. + `unique`- Mengingat array mengembalikan hanya item unik di dalam array ini. Misalnya, `["unique", [1, 2, 2]]` mengembalikan `[1, 2]`. # Ekspresi Cepat Amazon Amazon Quick menawarkan ekspresi tambahan untuk meningkatkan fungsionalitas visual Highcharts. Gunakan bagian berikut untuk mempelajari lebih lanjut tentang ekspresi Cepat umum untuk visual grafik tinggi. Untuk informasi selengkapnya tentang bahasa ekspresi JSON di Amazon Quick, lihat [ QuickStart Panduan Visual Highcharts](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) di. [DemoCentral](https://democentral.learnquicksight.online/#) **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` Gunakan `getColumn` ekspresi untuk mengembalikan nilai dari indeks kolom tertentu. Misalnya, tabel berikut menunjukkan daftar produk di samping kategorinya, dan harga. | Nama produk | Kategori | Harga | | --- | --- | --- | | Produk A | Teknologi | 100 | | Produk B | Eceran | 50 | | Produk C | Eceran | 75 | `getColumn`Kueri berikut menghasilkan array yang menunjukkan semua nama produk di samping harganya. ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` JSON berikutnya dikembalikan: ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` Anda juga dapat melewati beberapa kolom sekaligus untuk menghasilkan array array, yang ditunjukkan dalam contoh berikut. **Masukan** ``` { values: ["getColumn", 0, 2] } ``` **Keluaran** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` Mirip dengan`getColumn`, ekspresi berikut dapat digunakan untuk mengembalikan nilai kolom dari sumur bidang atau tema: + `getColumnFromGroupBy`mengembalikan kolom dari grup dengan bidang. Argumen kedua adalah indeks kolom untuk kembali. Misalnya, `["getColumnFromGroupBy", 0]` mengembalikan nilai bidang pertama sebagai array. Anda dapat melewati beberapa indeks untuk mendapatkan array array di mana setiap elemen sesuai dengan bidang dalam kelompok demi bidang dengan baik. + `getColumnFromValue`mengembalikan kolom dari bidang nilai dengan baik. Anda dapat melewatkan beberapa indeks untuk mendapatkan array array di mana setiap elemen sesuai dengan bidang di bidang nilai dengan baik. + `getColorTheme`mengembalikan palet warna saat ini dari tema Quick, yang ditunjukkan dalam contoh berikut. ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **Contoh** ![\[alt text not found\]](http://docs.aws.amazon.com/id_id/quick/latest/userguide/images/get-column-example.png) `getColumn`dapat mengakses kolom apa pun dari tabel: + `["getColumn", 0]`- mengembalikan array `[1, 2, 3, 4, 5, ...]` + `["getColumn", 1]`- mengembalikan array `[1, 1, 1, 1, 1, ...]` + `["getColumn", 2]`- mengembalikan array `[1674, 7425, 4371, ...]` `getColumnFromGroupBy`bekerja dengan cara yang sama, tetapi indeksnya terbatas pada kolom dalam grup dengan bidang dengan baik: + `["getColumnFromGroupBy", 0]`- mengembalikan array `[1, 2, 3, 4, 5, ...]` + `["getColumnFromGroupBy", 1]`- mengembalikan array `[1, 1, 1, 1, 1, ...]` + `["getColumnFromGroupBy", 2]`- tidak berfungsi, karena hanya ada dua kolom dalam kelompok demi bidang dengan baik `getColumnFromValue`bekerja dengan cara yang sama, tetapi indeksnya terbatas pada kolom di bidang nilai dengan baik: + `["getColumnFromValue", 0]`- mengembalikan array `[1, 2, 3, 4, 5, ...]` + `["getColumnFromValue", 1]`- tidak berfungsi, karena hanya ada satu kolom di bidang nilai dengan baik + `["getColumnFromValue", 2]`- tidak berfungsi, karena hanya ada satu kolom di bidang nilai dengan baik ## `formatValue` Gunakan `formatValue` ekspresi untuk menerapkan pemformatan cepat ke nilai Anda. Misalnya, ekspresi berikut memformat label sumbu x dengan nilai format yang ditentukan di bidang pertama sumur bidang Cepat. ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```