Bermula dengan carta.js: paksi dan skala

Dalam empat tutorial pertama, anda telah belajar banyak tentang carta.js. Selepas membaca empat tutorial pertama, anda sepatutnya dapat menyesuaikan petua dan tag, menukar fon, dan membuat pelbagai jenis carta. Siri tutorial ini belum memperkenalkan aspek carta.js: paksi dan skala.

Skala telah banyak berubah sejak versi V1.0 perpustakaan dan kini lebih berkuasa. Dalam tutorial ini, anda akan belajar bagaimana untuk memanipulasi skala dan menggunakan pilihan yang berbeza yang disediakan oleh perpustakaan untuk mengawal penampilannya.

Tukar garis grid dan label paksi

Semua pilihan konfigurasi untuk garisan grid bersarang di bawah pilihan scale untuk Tajuk dan Kekunci Font.

Berikut adalah carta kelajuan kereta lama yang sama yang ditentukan dengan satu set pilihan carta yang berbeza.

 var chartOptions = {
  Plugin: {
    legenda: {
      Paparan: Benar,
      Kedudukan: 'atas',
      Label: {
        BoxWidth: 50,
        UsePointStyle: Benar,
        PointStyle: "Line"
      }
    }
  },
  Skala: {
    x: {
      grid: {
        Paparan: Salah
      },
      Tajuk: {
        Paparan: Benar,
        Teks: "Masa Dalam Seconds",
        Warna: "merah",
        font: {
          Saiz: 24,
          Berat: "berani"
        }
      }
    },
    y: {
      grid: {
        Warna: "#ccc",
        BorderDash: [20, 4],
        BorderColor: "Hitam",
        Tickcolor: "Hitam"
      },
      Tajuk: {
        Paparan: Benar,
        Teks: "Kelajuan dalam batu sejam",
        Warna: "Hijau",
        font: {
          Saiz: 18,
          Berat: "berani"
        }
      }
    }
  }
}; 

Terdapat juga kunci yang dipanggil grid . Apabila ditetapkan ke kekunci font .

Anda juga boleh menetapkan nilai minimum dan maksimum tanda menggunakan unit yang ditetapkan ke nilai minimum dan maksimum minute . Anda boleh menggunakan kekunci displayFormats untuk menentukan format di mana masa dipaparkan dalam skala.

Anda juga boleh menggunakan kunci round untuk mengelilingi masa sebelum merancangnya ke carta. Berhati -hati apabila menetapkan nilai round . Katakan anda menetapkan nilainya hingga hour dan anda perlu merancang dua kali pada carta. Jika satu masa adalah 5:30 pagi dan masa yang lain adalah 5:50 pagi, mereka semua akan ditarik pada tanda tanda pada 5:00 pagi. Menetapkan nilainya kepada minute akan menarik mereka pada penanda 5:30 dan 5:50.

Anda boleh menggunakan kod berikut untuk melukis carta baris yang ditarik pada permulaan tutorial menggunakan skala masa.

 var chartOptions = {
  Plugin: {
    legenda: {
      Kedudukan: "atas",
      Label: {
        BoxWidth: 50,
        UsePointStyle: Benar,
        PointStyle: "Line",
      }
    }
  },
  Skala: {
    x: {
      Taip: "Masa",
      grid: {
        Tickcolor: "Hijau",
        BorderDash: [5, 2],
        Tickwidth: 2,
        Warna: "Hitam",
        BorderColor: "Hitam",
      },
      Masa: {
        Unit: "minit",
        Langkah: 30,
        Tooltipformat: "HH: MM A",
        DisplayFormats: {
          "minit": "HH: mm a"
        }
      },
      Ticks: {
        Warna: "Hijau",
        font: {
          Berat: "berani"
        }
      },
      Tajuk: {
        Paparan: Benar,
        Teks: "Masa",
        font: {
          Berat: "berani",
          Saiz: 22
        }
      }
    },
    y: {
      grid: {
        Warna: "Hitam",
        BorderDash: [5, 2,],
        BorderColor: "Hitam",
        Tickcolor: "merah",
        Tickwidth: 2,
      },
      Ticks: {
        Warna: "merah",
        font: {
          Berat: "berani"
        }
      },
      Tajuk: {
        Paparan: Benar,
        Teks: "kelajuan (dalam mph)",
        font: {
          Berat: "berani",
          Saiz: 22
        }
      }
    }
  }
}; 

Meringkaskan

Tutorial ini membantu anda memahami pelbagai jenis kutu dalam carta.js. Anda kini boleh menyesuaikan skala dengan mudah dalam carta anda dengan mengawal warna, minimum dan maksimum skala, bilangan skala, dan faktor -faktor lain.

Selepas membaca semua lima tutorial dalam siri ini, anda sepatutnya dapat membuat semua jenis carta yang terdapat dalam carta.js. Saya harap anda menikmati tutorial ini dan siri ini.

Jika anda mencari sumber atau sumber pembelajaran lain untuk digunakan di tempat kerja, lihat sumber yang kami tawarkan di pasaran Envato.

Atas ialah kandungan terperinci Bermula dengan carta.js: paksi dan skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!