小兔网

Highcharts 条形图Highcharts 条形图

以下实例演示了使用负值的,反向条形图。

实例

文件名:highcharts_bar_negative.htm

<html><head><meta charset="UTF-8" /><title>Highcharts 教程(zhishitu.com)</title><script src="/images/2021/07/13/06/2021071306561618390851.js"></script><script src="/images/2021/07/13/06/2021071306561619078262.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: 'bar'   };   var title = {      text: 'Bar chart with negative values'      };      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>

以上实例输出结果为:

Highcharts 条形图Highcharts 条形图