Cara membuat carta bar mendatar menggunakan Highcharts-tutorial js-php.cn

Cara membuat carta bar mendatar menggunakan Highcharts

PHPz

Lepaskan： 2023-12-17 22:16:15

asal

850 orang telah melayarinya

Cara membuat carta bar mendatar menggunakan Highcharts

Cara menggunakan Highcharts untuk mencipta carta bar mendatar, contoh kod khusus diperlukan

Pengenalan: Highcharts ialah perpustakaan carta JavaScript yang sangat berkuasa untuk mencipta pelbagai jenis carta interaktif. Carta bar mendatar ialah salah satu bentuk visualisasi data yang biasa. Artikel ini akan memperkenalkan cara menggunakan Carta Tinggi untuk mencipta carta bar mendatar dan memberikan contoh kod khusus.

1. Persediaan
Sebelum anda mula, pastikan anda telah memperkenalkan fail JavaScript Highcharts dan mencipta bekas untuk memaparkan carta dalam HTML. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="chartContainer"></div>
  </body>
</html>

Salin selepas log masuk

2. Buat data
Mula-mula, tentukan data yang ingin anda paparkan dalam JavaScript. Data untuk setiap bar biasanya terdiri daripada dua bahagian: nama bar dan nilai yang sepadan. Berikut ialah contoh data:

var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
  { name: 'D', value: 40 }
];

Salin selepas log masuk

3 Cipta carta bar mendatar
Gunakan fungsi carta Highcharts untuk mencipta objek carta dan tetapkan beberapa pilihan konfigurasi asas. Berikut ialah contoh kod: chart 函数创建一个图表对象，并设置一些基本的配置选项。以下是一个示例代码：

Highcharts.chart('chartContainer', {
  chart: {
    type: 'bar'
  },
  title: {
    text: '水平条形图'
  },
  xAxis: {
    title: {
      text: '值'
    }
  },
  yAxis: {
    title: {
      text: '名称'
    }
  },
  series: [{
    data: data
  }]
});

Salin selepas log masuk

四、添加样式和选项
通过调整配置选项和样式，您可以对水平条形图进行各种个性化设置。以下是一些常用的配置选项和样式属性：

柱状条的颜色：通过设置 color 属性来更改柱状条的颜色。例如：

series: [{
  data: data,
  color: '#FF0000' // 设置柱状条的颜色为红色
}]

Salin selepas log masuk

条形图的标题：通过设置 title.text 属性来更改条形图的标题。例如：

title: {
  text: '销售数据'
}

Salin selepas log masuk

坐标轴标签的样式：通过设置 xAxis.labels 和 yAxis.labels
```
xAxis: {
  labels: {
    style: {
      fontSize: '12px' // 设置 x 轴标签的字体大小为 12px
    }
  }
},
yAxis: {
  labels: {
    style: {
      fontWeight: 'bold' // 设置 y 轴标签的字体加粗
    }
  }
}
```
Salin selepas log masuk
4. Tambah gaya dan pilihan Dengan melaraskan pilihan dan gaya konfigurasi, anda boleh memperibadikan carta bar mendatar dalam pelbagai cara. Berikut ialah beberapa pilihan konfigurasi dan sifat gaya yang biasa digunakan:
1. Warna bar lajur: Tukar warna bar lajur dengan menetapkan sifat color. Contohnya:
  rrreee
  1. Tajuk carta bar: Tukar tajuk carta bar dengan menetapkan sifat title.text. Contohnya:
    rrreee
    1. Gaya label paksi: tukar paksi dengan menetapkan xAxis.labels dan yAxis.labels sifat Gaya label. Contohnya: 🎜🎜rrreee🎜Ringkasan: 🎜Dengan langkah di atas, anda boleh membuat carta bar mendatar dengan mudah menggunakan Highcharts dan memperibadikannya mengikut keperluan anda. Ingat, Highcharts menyediakan lebih banyak pilihan konfigurasi dan sifat gaya yang boleh anda sesuaikan mengikut keperluan anda. 🎜🎜Pautan rujukan: https://www.highcharts.com/demo/bar-basic🎜
Atas ialah kandungan terperinci Cara membuat carta bar mendatar menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!