Rumah hujung hadapan web tutorial js Cara membuat carta Gantt menggunakan Highcharts

Cara membuat carta Gantt menggunakan Highcharts

Dec 17, 2023 pm 07:23 PM
cipta highcharts Carta Gantt

Cara membuat carta Gantt menggunakan Highcharts

Cara menggunakan Highcharts untuk mencipta carta Gantt, contoh kod khusus diperlukan

Pengenalan:
Carta Gantt ialah bentuk carta yang biasa digunakan untuk memaparkan kemajuan projek dan pengurusan masa, yang boleh memaparkan masa mula dan tamat secara visual masa tugas dan kemajuan. Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyediakan jenis carta kaya dan pilihan konfigurasi yang fleksibel. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta Gantt dan memberikan contoh kod khusus.

1. Pengenalan kepada carta Gantt Highcharts:
Carta Gantt Highcharts ialah jenis carta dalam perpustakaan Highcharts, yang memaparkan kemajuan dan masa projek dengan memetakan data ke garis masa. Carta Gantt diwakili oleh satu atau lebih bar tugas dengan masa sebagai abscissa Panjang bar tugasan mewakili tempoh tugasan, dan warna mewakili kemajuan tugasan.

2. Konfigurasi asas carta Gantt Highcharts:

  1. Tetapkan jenis paksi-x kepada masa tarikh, yang mewakili garis masa.
  2. Tetapkan nilai maksimum dan minimum paksi-y untuk menentukan ketinggian bar tugas.
  3. Tetapkan format data, termasuk masa mula, masa tamat dan kemajuan tugas.
  4. Tetapkan gaya bar tugas, termasuk warna, lebar, dsb.
  5. Tetapkan tajuk, sari kata, dsb. carta Gantt.

3. Contoh kod khusus carta Gantt Highcharts:

// 创建甘特图的容器
var container = document.getElementById('gantt-container');

// 配置甘特图的基本选项
var options = {
  chart: {
    renderTo: container,
    type: 'gantt'
  },
  title: {
    text: '项目进度甘特图'
  },
  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%Y-%m-%d}'
    }
  },
  yAxis: {
    categories: ['任务1', '任务2', '任务3'],
    min: 0,
    max: 2
  },
  series: [{
    name: '任务进度',
    data: [{
      name: '任务1',
      start: Date.UTC(2022, 0, 1),
      end: Date.UTC(2022, 0, 3),
      progress: 0.6
    }, {
      name: '任务2',
      start: Date.UTC(2022, 0, 2),
      end: Date.UTC(2022, 0, 5),
      progress: 0.4
    }, {
      name: '任务3',
      start: Date.UTC(2022, 0, 6),
      end: Date.UTC(2022, 0, 10),
      progress: 0.2
    }]
  }]
};

// 创建甘特图
var chart = new Highcharts.Chart(options);
Salin selepas log masuk

Kod di atas menunjukkan cara menggunakan Highcharts untuk mencipta carta Gantt yang mudah. Antaranya, dalam elemen kontena <div id="gantt-container"></div>用于容纳甘特图,甘特图的基本配置在options对象中进行。在series, kami menentukan masa mula, masa tamat dan kemajuan tiga tugasan, yang dipaparkan sebagai tiga bar tugas pada garis masa.

4. Konfigurasi tersuai carta Gantt Highcharts:
Selain konfigurasi asas, Highcharts juga menyediakan banyak pilihan penyesuaian untuk menjadikan carta Gantt lebih sesuai untuk keperluan yang berbeza. Berikut adalah beberapa pilihan penyesuaian yang biasa:

  1. Modify warna bar tugas:

    series: [{
      ...
      data: [{
     ...
     color: 'green'
      }]
    }]
    Salin selepas log masuk
    e
  2. modify lebar bar tugas:

    series: [{
      ...
      data: [{
     ...
     width: 10
      }]
    }]
    Salin selepas log masuk
    e
  3. add pautan ke bar tugas:

    series: [{
      ...
      data: [{
     ...
     link: 'https://example.com'
      }]
    }]
    Salin selepas log masuk
    e
  4. custom gantt carta carta ganttcustom gaya:

    chart: {
      ...
      style: {
     fontFamily: 'Arial',
     fontSize: '14px'
      }
    }
    Salin selepas log masuk

    Dengan mengubah suai pilihan konfigurasi dalam kod di atas, anda boleh mencapai kesan carta Gantt yang lebih diperibadikan.

    Kesimpulan:
    Artikel ini memperkenalkan langkah asas dan contoh kod untuk mencipta carta Gantt menggunakan Highcharts. Dengan melaraskan pilihan konfigurasi dengan sewajarnya, carta Gantt dengan gaya dan keperluan yang berbeza boleh dicapai. Dengan menggunakan Highcharts, kami boleh mencipta carta Gantt yang berkuasa dengan mudah untuk memaparkan kemajuan projek dan garis masa dengan berkesan. Saya harap artikel ini dapat membantu pembaca lebih memahami dan menggunakan pengetahuan berkaitan carta Gantt Highcharts.

    Atas ialah kandungan terperinci Cara membuat carta Gantt menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mencipta seni piksel dalam GIMP Bagaimana untuk mencipta seni piksel dalam GIMP Feb 19, 2024 pm 03:24 PM

Artikel ini akan menarik minat anda jika anda berminat menggunakan GIMP untuk penciptaan seni piksel pada Windows. GIMP ialah perisian penyuntingan grafik terkenal yang bukan sahaja percuma dan sumber terbuka, tetapi juga membantu pengguna mencipta imej dan reka bentuk yang cantik dengan mudah. Selain sesuai untuk pemula dan pereka profesional, GIMP juga boleh digunakan untuk mencipta seni piksel, satu bentuk seni digital yang menggunakan piksel sebagai satu-satunya blok bangunan untuk melukis dan mencipta. Cara Membuat Seni Piksel dalam GIMP Berikut ialah langkah utama untuk mencipta gambar piksel menggunakan GIMP pada PC Windows: Muat turun dan pasang GIMP, kemudian lancarkan aplikasi. Buat imej baharu. Ubah saiz lebar dan tinggi. Pilih alat pensel. Tetapkan jenis berus kepada piksel. sediakan

Cara menggunakan data dinamik dalam Highcharts untuk memaparkan data masa nyata Cara menggunakan data dinamik dalam Highcharts untuk memaparkan data masa nyata Dec 17, 2023 pm 06:57 PM

Cara menggunakan data dinamik dalam Highcharts untuk memaparkan data masa nyata Dengan kemunculan era data besar, paparan data masa nyata menjadi semakin penting. Highcharts, sebagai perpustakaan carta yang popular, menyediakan fungsi yang kaya dan kebolehsesuaian, membolehkan kami memaparkan data masa nyata secara fleksibel. Artikel ini akan memperkenalkan cara menggunakan data dinamik dalam Highcharts untuk memaparkan data masa nyata dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan sumber data yang boleh menyediakan data masa nyata. Dalam artikel ini, saya

Cara menggunakan carta Sankey untuk memaparkan data dalam Highcharts Cara menggunakan carta Sankey untuk memaparkan data dalam Highcharts Dec 17, 2023 pm 04:41 PM

Cara menggunakan rajah Sankey untuk memaparkan data dalam rajah Sankey Highcharts (SankeyDiagram) ialah jenis carta yang digunakan untuk menggambarkan proses yang kompleks seperti aliran, tenaga dan dana. Ia boleh memaparkan dengan jelas perhubungan dan aliran antara pelbagai nod, dan boleh membantu kami memahami dan menganalisis data dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Highcharts untuk mencipta dan menyesuaikan carta Sankey, dengan contoh kod khusus. Pertama, kita perlu memuatkan perpustakaan Highcharts dan Sank

Cara mencipta keluarga dengan Gree+ Cara mencipta keluarga dengan Gree+ Mar 01, 2024 pm 12:40 PM

Ramai rakan menyatakan bahawa mereka ingin tahu cara membuat keluarga dalam perisian Gree+ Berikut adalah kaedah operasi untuk anda Rakan yang ingin mengetahui lebih lanjut, datang dan lihat dengan saya. Mula-mula, buka perisian Gree+ pada telefon mudah alih anda dan log masuk. Kemudian, dalam bar pilihan di bahagian bawah halaman, klik pilihan "Saya" di hujung kanan untuk memasuki halaman akaun peribadi. 2. Selepas datang ke halaman saya, terdapat pilihan "Buat Keluarga" di bawah "Keluarga". 3. Seterusnya lompat ke halaman untuk mencipta keluarga, masukkan nama keluarga yang akan ditetapkan dalam kotak input mengikut gesaan, dan klik butang "Simpan" di penjuru kanan sebelah atas selepas memasukkannya. 4. Akhir sekali, gesaan "simpan berjaya" akan muncul di bahagian bawah halaman, menunjukkan bahawa keluarga telah berjaya dibuat.

Cara menggunakan carta bertindan untuk memaparkan data dalam Highcharts Cara menggunakan carta bertindan untuk memaparkan data dalam Highcharts Dec 18, 2023 pm 05:56 PM

Cara menggunakan carta bertindan untuk memaparkan data dalam Carta Tinggi Carta bertindan ialah cara biasa untuk menggambarkan data, yang boleh memaparkan jumlah berbilang siri data pada masa yang sama dan memaparkan sumbangan setiap siri data dalam bentuk carta bar. Highcharts ialah perpustakaan JavaScript berkuasa yang menyediakan pelbagai jenis carta dan pilihan konfigurasi yang fleksibel untuk memenuhi pelbagai keperluan visualisasi data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta bertindan dan menyediakan

Bagaimana untuk membuat folder pada Telefon Realme? Bagaimana untuk membuat folder pada Telefon Realme? Mar 23, 2024 pm 02:30 PM

Tajuk: Panduan Pemula Telefon Realme: Bagaimana Membuat Folder pada Telefon Realme? Dalam masyarakat hari ini, telefon bimbit telah menjadi alat yang sangat diperlukan dalam kehidupan manusia. Sebagai jenama telefon pintar popular, Telefon Realme digemari pengguna kerana sistem pengendaliannya yang ringkas dan praktikal. Dalam proses menggunakan telefon Realme, ramai orang mungkin menghadapi situasi di mana mereka perlu mengatur fail dan aplikasi pada telefon mereka, dan mencipta folder ialah cara yang berkesan. Artikel ini akan memperkenalkan cara membuat folder pada telefon Realme untuk membantu pengguna mengurus kandungan telefon mereka dengan lebih baik. Tidak.

Cara Membuat Poster Kenalan untuk iPhone Anda Cara Membuat Poster Kenalan untuk iPhone Anda Mar 02, 2024 am 11:30 AM

Dalam iOS17, Apple telah menambahkan ciri poster kenalan pada apl Telefon dan Kenalan yang biasa digunakan. Ciri ini membolehkan pengguna menetapkan poster yang diperibadikan untuk setiap kenalan, menjadikan buku alamat lebih visual dan peribadi. Poster kenalan boleh membantu pengguna mengenal pasti dan mencari kenalan tertentu dengan lebih cepat, meningkatkan pengalaman pengguna. Melalui ciri ini, pengguna boleh menambah gambar atau logo tertentu pada setiap kenalan mengikut keutamaan dan keperluan mereka, menjadikan antara muka buku alamat lebih jelas Apple dalam iOS17 menyediakan pengguna iPhone dengan cara baru untuk mengekspresikan diri mereka, dan menambah poster kenalan yang boleh diperibadikan. Ciri Poster Kenalan membolehkan anda memaparkan kandungan unik dan diperibadikan apabila memanggil pengguna iPhone lain. awak

Cara membuat peta haba peta menggunakan Highcharts Cara membuat peta haba peta menggunakan Highcharts Dec 17, 2023 pm 04:06 PM

Cara menggunakan Highcharts untuk mencipta peta haba peta memerlukan contoh kod khusus Peta haba ialah kaedah paparan data visual yang boleh mewakili pengedaran data dalam setiap kawasan melalui lorek warna yang berbeza. Dalam bidang visualisasi data, Highcharts ialah perpustakaan JavaScript yang sangat popular yang menyediakan jenis carta yang kaya dan fungsi interaktif. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta peta haba peta dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan beberapa data

See all articles