Cara menggunakan diagram lingkaran js html

Question

Kita akan membuat komponen React untuk 3 jenis bagan. baris, bar dan donat. Dasbor juga akan diperbarui jika data diperbarui

Table of Contents Show

Latar belakang
Pendekatan kita
Uji pembuatan data
komponen diagram batang
Komponen dasbor
Konfigurasi diagram batang
Pembaruan data
Komponen diagram garis dan diagram lingkaran
Tata letak dasbor
Bagaimana cara membuat diagram lingkaran?
Untuk apa diagram lingkaran digunakan?
Tuliskan dan jelaskan apa yang dimaksud dengan diagram lingkaran?
Apa yang dimaksud dengan diagram lingkaran di Excel?

Latar belakang

React adalah salah satu pustaka JavaScript paling populer untuk membuat antarmuka pengguna. Demikian juga Bagan. js adalah salah satu pustaka JavaScript paling populer untuk membuat bagan. Seperti yang akan kita lihat di tutorial ini, kedua library terintegrasi dengan lancar

Bagan. js merender ke elemen Canvas yang berarti kita tidak perlu khawatir tentang pustaka mana yang mengelola DOM. (React akan mengurus semua yang berhubungan dengan DOM sementara Chart. js bertanggung jawab untuk menggambar ke elemen Canvas. )

Bagan. js memiliki dukungan bawaan untuk tooltips, animasi, dan dukungan yang cukup bagus untuk daya tanggap. Ya. dasbor ini responsif

Pendekatan kita

Tutorial ini menunjukkan cara mengintegrasikan React dan Chart. js tanpa menggunakan pustaka lain (seperti react-chartjs-2). Kami tidak akan menggunakan pembungkus dalam tutorial ini karena

kami ingin mempertahankan kontrol langsung atas Chart. js seperti yang kita bisa
kami ingin memperdalam pemahaman kami tentang pengintegrasian pustaka pembuatan bagan seperti Bagan. js dengan Bereaksi
kami ingin mengabstraksi Bagan. struktur data js di komponen bagan kami
tidak terlalu sulit untuk mengintegrasikan React dan Chart. js

Komponen bagan kami akan memiliki antarmuka yang mirip dengan ini

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

di mana atribut

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

_4 adalah larik objek

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

Kode lengkapnya ada di pena Codepen ini. (Awalnya saya membuat dasbor ini menggunakan create-react-app lalu salin dan tempel kode ke Codepen. )

Uji pembuatan data

Kami akan mulai dengan menulis fungsi

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

5 yang menghasilkan data uji

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

_

Fungsi ini membuat larik yang berisi 4 kumpulan data (atau umpan). Umpan pertama adalah objek yang mewakili deret waktu

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

3 umpan yang tersisa adalah objek yang mewakili data kategorikal. Sebagai contoh

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

_

(

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

5 memanggil dua fungsi

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

7 dan

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

8 yang menghasilkan array objek. Lihat kode yang sudah selesai jika Anda tertarik untuk melihat bagaimana fungsi ini diimplementasikan. )

komponen diagram batang

Sekarang kita akan membuat komponen untuk membuat diagram batang. Komponen kita akan memiliki 3 atribut

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

Atribut pertama

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

_4 adalah array data

[
  {
    "name": "A",
    "value": 46
  },
  {
    "name": "B",
    "value": 87
  },
  ...
]

sedangkan

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

_0 adalah judul bagan dan

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

1 adalah warna batang

Mulailah dengan membuat komponen kelas sederhana bernama

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

2

class BarChart extends React.Component {
  render() {
    return <canvas />
  }
}

Ini merender satu elemen

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

_3 yang akan berisi bagan kita. Kita harus mereferensikan elemen Canvas saat bagan dibuat, jadi tambahkan React ref ke komponen

class BarChart extends React.Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
  }

  render() {
    return (
      <canvas ref={this.chartRef} />
    );
  }
}

(Kami menggunakan

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

_4 API yang diperkenalkan di React 16. 3. )

Sekarang tambahkan metode

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

_5 yang memberi contoh Bagan. diagram batang js

componentDidMount() {
  this.myChart = new Chart(this.canvasRef.current, {
    type: 'bar'
  });
}

Perhatikan bahwa argumen pertama ke konstruktor Bagan adalah referensi ke elemen kanvas

Bagan. js membutuhkan properti

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

_4 untuk terstruktur seperti

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

0

jadi kita perlu mengubah

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

7,

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

8 dan

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

9 sesuai dengan itu

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

1

Begini tampilan

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

_5 sekarang

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

2

Komponen dasbor

Kami sekarang akan membuat komponen dasbor utama. Kami menginisialisasi

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

1 menggunakan

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

5 dan merender satu

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

2

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

_3

Render komponen

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

_4 dan Anda akan melihat bagan batang

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

4

Konfigurasi diagram batang

Sumbu y pada diagram batang di atas dimulai dari nilai bukan nol. Ini umumnya dianggap sebagai praktik yang buruk, jadi kami akan mengonfigurasi sumbu y minimum dan maksimum

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

5

Pembaruan data

Kami sekarang akan menambahkan dukungan untuk pembaruan data. Tambahkan pengatur waktu interval ke

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

_4 yang meminta data baru dan menggunakan

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

6 untuk memperbarui

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

7

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

6

Setiap 5 detik status komponen berubah memicu render ulang. Hal ini pada gilirannya menyebabkan

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

_8 dalam komponen

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

2 dipanggil

Sebuah Grafik. Bagan js dapat diperbarui dengan memutasi array data (baik dengan menyediakan array baru atau mengubah nilai array) dan memanggil

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

0

Dalam kasus kami, kami akan memperbarui properti

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

_1 dan

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

2 dari

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

3 dan memanggil

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

0

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

7

Komponen diagram garis dan diagram lingkaran

Kita akan menambahkan komponen untuk bagan garis dan donat. Mereka akan mengikuti bentuk yang sama dengan

{
  "title": "Visits",
  "data": [
    {
      "time": Tue May 01 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 39
    },
    {
      "time": Wed May 02 2018 00:00:00 GMT+0100 (British Summer Time),
      "value": 60
    },
    ...
  ]
}

2, perbedaan utamanya adalah properti

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

6. Bagan garis juga memerlukan beberapa konfigurasi untuk menyetel jenis sumbu x ke

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

7 dan beberapa gaya tambahan

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

_8

Inilah komponen

<BarChart
  data={myData}
  title="My amazing data"
  color="#70CAD1"
/>

_8

[
  {
    "label": "Apples",
    "value": 10
  },
  {
    "label": "Oranges",
    "value": 17
  },
  ...
]

_9

Sekarang perbarui metode

{
  "title": "Categories",
  "data": [
    {
      "label": "A",
      "value": 46
    },
    {
      "label": "B",
      "value": 87
    },
    ...
  ]
}

4 komponen

[
  {
    "name": "A",
    "value": 46
  },
  {
    "name": "B",
    "value": 87
  },
  ...
]

0 untuk menggunakan semua 3 tipe bagan

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

_0

Ini menghasilkan 4 bagan yang diperbarui setiap 5 detik

Tata letak dasbor

Bagan ditampilkan satu di atas yang lain. Namun jika ada lebar yang cukup, kami lebih suka bagan garis menjadi lebar penuh dan bagan yang tersisa menempati baris paling bawah

Kami akan membungkus setiap bagan dalam elemen

[
  {
    "name": "A",
    "value": 46
  },
  {
    "name": "B",
    "value": 87
  },
  ...
]

_1 dan menambahkan kelas

[
  {
    "name": "A",
    "value": 46
  },
  {
    "name": "B",
    "value": 87
  },
  ...
]

2 ke bagan garis dan kelas

[
  {
    "name": "A",
    "value": 46
  },
  {
    "name": "B",
    "value": 87
  },
  ...
]

3 ke bagan yang tersisa

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

_0

Kami akan menambahkan CSS berikut untuk menambahkan beberapa padding di sekitar setiap bagan, membuat bagan utama lebar penuh dan bagan yang tersisa sepertiga dari lebar (selama lebar layar lebih besar dari 700px)

function getFeeds() {
  let feeds = [];

  feeds.push({
    title: 'Visits',
    data: getRandomDateArray(150)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(20)
  });

  feeds.push({
    title: 'Categories',
    data: getRandomArray(10)
  });

  feeds.push({
    title: 'Data 4',
    data: getRandomArray(6)
  });

  return feeds;
}

_2

Dan akhirnya kami menetapkan opsi

[
  {
    "name": "A",
    "value": 46
  },
  {
    "name": "B",
    "value": 87
  },
  ...
]

_4 pada ketiga komponen bagan ke

[
  {
    "name": "A",
    "value": 46
  },
  {
    "name": "B",
    "value": 87
  },
  ...
]

5. Ini membuat Bagan. js menyesuaikan bagan dengan elemen yang memuatnya

Bagaimana cara membuat diagram lingkaran?

A. Cara Membuat Bagan Pai di Excel (Pie) .

Sorot rentang data

Klik tombol perintah Insert Pie and Donut Chart pada pita Insert

Pilih jenis diagram lingkaran yang Anda butuhkan, Anda dapat memilih 2-D Pie, 3-D Pie, atau Doughnout

Untuk apa diagram lingkaran digunakan?

Diagram lingkaran dapat digunakan untuk perbandingan komponen. Perbandingan komponen menunjukkan ukuran masing-masing komponen sebagai persentase dari total.

Tuliskan dan jelaskan apa yang dimaksud dengan diagram lingkaran?

Diagram lingkaran (atau diagram lingkaran) adalah diagram yang berbentuk lingkaran yang dibagi menjadi beberapa irisan untuk mengilustrasikan proporsi numerik. Dalam diagram lingkaran , panjang busur setiap irisan (dan konsekuensinya, sudut dan luas pusatnya), sebanding dengan besaran yang diwakilinya.

Apa yang dimaksud dengan diagram lingkaran di Excel?

Diagram lingkaran atau diagram lingkaran adalah bentuk visualisasi data dalam bentuk lingkaran yang dibagi menjadi beberapa irisan yang mewakili nilai numerik suatu data . Bagan pai sering digunakan untuk merepresentasikan data dengan variabel numerik tunggal. Berikut cara membuat diagram lingkaran Excel.

kode html