Menggunakan Highcharts - Amazon QuickSight
PertimbanganMembuat visual Highcharts

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 Core. Visual Highcharts memberi QuickSight penulis akses langsung ke Highcharts API.

Untuk mengonfigurasi visual Highcharts, QuickSight penulis perlu menambahkan skema Highcharts JSON ke visual di. QuickSight Penulis dapat menggunakan QuickSight ekspresi untuk QuickSight bidang referensi, 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 masukan 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 QuickSight, lihat Panduan Visual QuickStart Highcharts di. DemoCentral

Gambar berikut menunjukkan ikon Highcharts di QuickSight.

Gambar berikut menunjukkan bagan lipstik yang dikonfigurasi dalam editor JSON kode Chart dari visual Highcharts di. QuickSight

Untuk lebih banyak contoh visual yang dapat Anda buat dengan visual Highcharts QuickSight, lihat demo Highcharts.

Pertimbangan

Sebelum Anda mulai membuat visual Highcharts di Amazon QuickSight, 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 QuickSight.

  1. Buka konsol QuickSight .

  2. Buka QuickSight analisis yang ingin Anda tambahkan visual Highcharts.

  3. Pada bilah aplikasi, pilih Tambah, lalu pilih Tambahkan visual.

  4. Pada panel Jenis visual, pilih ikon visual Highcharts. Visual kosong muncul di lembar analisis dan panel Properties terbuka di sebelah kiri.

  5. 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.

    2. (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.

    3. (Opsional) Untuk teks Alt, tambahkan teks alt yang Anda inginkan untuk memiliki visual.

  6. 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.

  7. Perluas bagian kode Bagan, yang ditunjukkan pada gambar berikut.

  8. 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. Setiap kesalahan yang QuickSight mengidentifikasi 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": "<span style='font-size:10px'>{point.key}</span><table>",
    "pointFormat": "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>${point.y:,.0f}</b></td></tr>",
    "footerFormat": "</table>",
    "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
    }
  ]
}

  9. Pilih TERAPKAN KODE. QuickSight 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. Gambar di bawah ini menunjukkan bagan lipstik yang dibuat dengan skema JSON dari langkah sebelumnya.

  10. (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 QuickSight tertentu yang dapat digunakan untuk mengonfigurasi visual Highcharts, lihat. Bahasa ekspresi Amazon QuickSight JSON untuk visual Highcharts