Highcharts verwenden Reverse negativen Säulendiagramm
Das folgende Beispiel zeigt die Verwendung eines umgekehrten negativen Säulendiagramm.
Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen.
Konfiguration
Chart-Konfiguration
Einstellen der Diagrammtyp Attributspalte, beschreibt chart.type den Diagrammtyp. Der Standardwert ist "Linie".
var chart = { type: 'column' };
Beispiele
Dateiname: highcharts_column_negative.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://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: 'column' }; var title = { text: '使用负值的反向柱形图' }; var xAxis = { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }; var credits = { enabled: false }; var series= [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, -2, -3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, -2, 5] } ]; var json = {}; json.chart = chart; json.title = title; json.xAxis = xAxis; json.credits = credits; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
Das obige Beispiel Ausgabe lautet: