1. 程式人生 > >highchart 柱狀圖,列寬自適應(x軸是時間的特殊情況)

highchart 柱狀圖,列寬自適應(x軸是時間的特殊情況)

1、柱子列寬自適屬性:

pointWidth:25, //柱子寬度,如果設定該值,則下面2個屬性無效
pointPadding: 0.4,//每列之間的距離值,預設此值為0.1
groupPadding: 0,//每個值之間的間距,其實和poingPadding有一樣的效果。不過這個主要是用於對付存在分組的情況

2、x軸屬性設定裡面,需要把間隔固定死,否則會出現柱子重疊情況

//表示時間間隔,4小時(如果不固定死,則資料來源的量變多時,柱子會出現重疊情況)
tickInterval: 4 * 3600 * 1000,

3、樣例程式碼如下:

var chart = null;
// 獲取 CSV 資料並初始化圖表
$.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (csv) { chart = Highcharts.chart('container', { chart: { type: 'column',//柱狀圖column,曲線用line zoomType: 'x',//使用者滑鼠放縮操作 spacingLeft: 0,//左側距離 spacingRight: 0//
右側距離 }, title: { text: '空氣質量PM2.5分佈', style: { color: '#000000', fontSize: '18px', fontFamily: '微軟雅黑' }, }, subtitle: { text: '副標題' }, xAxis: {//x軸的格式 type: 'datetime',
//表示時間間隔,4小時(如果不固定死,則資料來源的量變多時,柱子會出現重疊情況) tickInterval: 4 * 3600 * 1000, labels: { style: { fontSize: '14px', color: '#000000', } }, dateTimeLabelFormats: { millisecond: '%H:%M:%S.%L', second: '%H:%M:%S', minute: '%H:%M', hour: '%H時', day: '%m月%d日', week: '%m-%d', month: '%Y-%m', year: '%Y' } }, yAxis: [{ title: {//y軸的標題 text: 'PM2.5濃度', style: { color: '#000000', fontSize: '14px', }, }, labels: {//y軸座標和單位 format: '{value} ug/m3', style: { color: '#000000', fontSize: '14px', } }, min: 0 }], legend: {//圖例 align: 'center', verticalAlign: 'bottom', y: 20, floating: true, borderWidth: 1 }, tooltip: {//滑鼠提示框 shared: true, crosshairs: true, useHTML: true, // 時間格式化字元 // 預設會根據當前的資料點間隔取對應的值 // 當前圖表中資料點間隔為 1小時,所以配置hour值即可 dateTimeLabelFormats: { day: '%Y-%m-%d %H時' } }, credits: { enabled: false }, plotOptions: { series: { marker: { enabled: true, radius: 3 }, // 關閉滑鼠跟蹤,對應的提示框、點選事件會失效 enableMouseTracking: true, turboThreshold: 0 }, column: { dataLabels: { enabled: true, style: { color: '#555', fontSize: '12px', fontFamily: '宋體', textShadow: false, textOutline: "none" } }, //pointWidth:25, //柱子寬度,如果設定該值,則下面2個屬性無效 pointPadding: 0.4,//每列之間的距離值,預設此值為0.1 groupPadding: 0,//每個值之間的間距,其實和poingPadding有一樣的效果。不過這個主要是用於對付存在分組的情況 borderWidth: 1, shadow: false } }, series: [{ borderRadius: 7, color:'#ff0000', name: 'PM2.5', data: [ {x:1533430800000,y:39}, {x:1533427200000,y:50}, {x:1533423600000,y:50}, {x:1533420000000,y:45}, {x:1533416400000,y:45}, {x:1533412800000,y:45}, {x:1533409200000,y:45}, {x:1533405600000,y:45}, {x:1533402000000,y:46}, {x:1533398400000,y:51}, {x:1533394800000,y:45}, {x:1533391200000,y:46}, {x:1533387600000,y:38}, {x:1533384000000,y:42}, {x:1533380400000,y:47}, {x:1533376800000,y:46}, {x:1533373200000,y:81}, {x:1533369600000,y:41}, {x:1533366000000,y:41}, {x:1533362400000,y:45}, {x:1533358800000,y:47}, {x:1533355200000,y:51}, {x:1533351600000,y:46}, {x:1533348000000,y:51}, {x:1533344400000,y:50}, ] }] }); });

4、效果圖如下: