Question

我在条形图中实现滚动功能，但我无法设置范围属性，因为我的要求是在x轴而不是索引显示日期为[0,1,2，... ]。代码：

<!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/

我已将extent属性设置为[-1,14]，即设置了滚动条的长度。我想通过传递日期来实现它。

Answer 1

两件事：

您已声明轴两次。无论第一个（范围）中的任何内容都被以下声明覆盖
您声明的范围是一对数字，而不是日期。 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
        },

    },

在C3图表中设置范围属性

1 个答案: