Highcharts ialah perpustakaan carta yang ditulis dalam JavaScript tulen.
Highcharts memudahkan dan memudahkan untuk menambahkan carta interaktif pada tapak web atau aplikasi web
Highcharts adalah percuma untuk kajian peribadi, laman web peribadi dan penggunaan bukan komersial.
Carta Kawasan Asas Highcharts sintaks
Ciri Carta Tinggi
Keserasian - Menyokong semua pelayar utama dan platform mudah alih (android, iOS, dll.).
Berbilang peranti - Menyokong berbilang peranti, seperti peranti pegang tangan iPhone/iPad, tablet, dsb.
Percuma untuk digunakan - Sumber terbuka dan percuma.
Ringan - saiz perpustakaan teras highcharts.js hanya kira-kira 35KB.
Konfigurasi mudah - gunakan format json untuk mengkonfigurasi
Dinamik - boleh diubah suai selepas carta dijana.
Multidimensi - Menyokong carta berbilang dimensi
Alat gesaan konfigurasi - Akan ada maklumat segera apabila tetikus bergerak ke titik tertentu dalam carta.
Garis masa - tepat kepada milisaat.
Eksport - Jadual boleh dieksport ke format PDF/ PNG/ JPG / SVG
Output - Carta keluaran halaman web.
Boleh Zum - Pilih bahagian carta untuk membesarkan dan memerhatikan carta dari dekat;
Data luaran - Muatkan data dinamik daripada pelayan.
Putaran Teks - Menyokong putaran label ke mana-mana arah.
Carta Kawasan Asas Highcharts contoh
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | php.cn</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'area'
};
var title = {
text: 'US and USSR nuclear stockpiles'
};
var subtitle = {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
};
var xAxis = {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
};
var yAxis = {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
};
var tooltip = {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
};
var plotOptions = {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
};
var series= [{
name: 'USA',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>Run Instance »
Klik butang "Run Instance" untuk melihat instance dalam talian