Menggunakan Highcharts

Buka konsol QuickSight .

Buka QuickSight analisis yang ingin Anda tambahkan visual Highcharts.

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

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

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.

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.

Perluas bagian kode Bagan, yang ditunjukkan pada gambar berikut.

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
    }
  ]
}

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.

(Opsional) Buka dropdown Referensi untuk mengakses tautan ke materi referensi Highctarts yang bermanfaat.