设置在C3图表程度属性

我实施在我的柱形图滚动功能，但我无法设置程度属性，因为我的要求是显示在x轴，而不是索引的时间为[0， 1,2，...]。代码：设置在C3图表程度属性

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Occupancy</title> 
<link rel="stylesheet" type="text/css" href="css/c3.css"> 
<link rel="stylesheet" type="text/css" href="css/c3.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src = "js/c3.js"></script> 
<script src = "js/c3.min.js"></script> 
<script src = "js/d3.min.js"></script> 
<script src = "js/d3.js"></script> 
</head> 
<body> 
<div id="testDate1"></div> 
<script type="text/javascript"> 
var listDate = []; 
m = [ "Jan", "Feb", "Mar", "Apr", "May","Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]; 
var listDate = []; 
var startDate ='2017-04-12'; 
var endDate = '2017-07-06'; 
var dateMove = new Date(startDate); 
var strDate = startDate; 
while (strDate < endDate){ 
    var strDate = dateMove.toISOString().slice(0,10); 
    listDate.push(strDate); 
    dateMove.setDate(dateMove.getDate()+1); 
}; 

var val = [10,90,80,85,60,75,25,10,95,70,82,65,80,20,9,95,80,89,70,60,15,11,80,90,75,60,78,16,5,98,85,89,70,65,25,15,75,80,85,68,78,20,9,90,96,83,91,76,18,7,99,90,85,86,65,14,6,95,94,85,75,83,19,8,93,95,83,86,90,23,10,100,95,97,83,65,25,14,96,100,85,75,69,26,15,55,96,75,85,90,30,20,55]; 
var date = ['x'].concat(listDate); 
var occu = ['Occupancy'].concat(val);   

//Bar line Chart 
var axisLabel = "Occupancy(%)" 
var chart = c3.generate({    
    bindto : '#testDate1', 
    data: { 
     x: 'x', 
     columns: [date,occu], 
     type: 'bar' 
    }, 
    bar: { 
     /* width: { 
      ratio: 0.05 // this makes bar width 50% of length between ticks 
     }  */ 
     width: 9 
    }, 
    subchart: { 
     show: true 
    }, 
    axis: { 
     x: { 
      extent: [4/12, 5/24] 
     } 
    }, 
    axis : { 
     x: { 
       type: 'timeseries',      
       tick: { 
       /* count: 8, 
       format: '%m-%d'  */ 
       values: ['2017-04-12', '2017-04-19','2017-04-26','2017-05-03','2017-05-10','2017-05-17','2017-05-24','2017-05-31','2017-06-07','2017-06-07','2017-06-14','2017-06-21','2017-06-28','2017-07-06']  
      } 
      }, 
     y : { 
      label : { 
       text : axisLabel, 
       position : 'outer-middle' 
      }, 
      min : 10, 
      max : 100 
     }, 

    },    
    grid: { 
     x: { 
      show: true 
     }, 
     y: { 
      show: true 
     } 
    }, 
    color: { 
     pattern: ['#140e7f'] 
    } 
}); 

</script> 
</body> 
</html>

像，在该小提琴：http://jsfiddle.net/y6tns4mt/1/

我已经设置的程度属性作为[-1，14]即滚动条的长度设置。我想通过传递日期以实施。

来源

2017-10-05 Ayush B

两件事情：

您已经声明轴的两倍。不管在第一个（的程度）由以下声明
你声明的范围覆盖是一对数字，没有日期。 4/12 = 0.333

因此，在你的代码，你需要声明如下轴：

axis : { 
     x: { 
      extent: ['2017-04-12', '2017-05-24'], 
       type: 'timeseries',      
       tick: { 
       /* count: 8, 
       format: '%m-%d'  */ 
       values: ['2017-04-12', '2017-04-19','2017-04-26','2017-05-03','2017-05-10','2017-05-17','2017-05-24','2017-05-31','2017-06-07','2017-06-07','2017-06-14','2017-06-21','2017-06-28','2017-07-06']  
      } 
      }, 
     y : { 
      label : { 
       text : axisLabel, 
       position : 'outer-middle' 
      }, 
      min : 10, 
      max : 100 
     }, 

    },

来源

2017-10-09 08:18:16 mgraham

设置在C3图表程度属性

回答

相关问题