Невозможно повернуть галочку по оси y при повороте оси

Question

Я пытаюсь повернуть ось по типу в нижней части диаграммы. Я могу вращать тики X-оси только отлично, но как только я поворачиваю ось, тогда ось вдоль дна технически считается осью y, и я больше не могу вращать тики.

Я хочу, чтобы полосы пересекались слева направо, и я хочу, чтобы тики по дну были наклонены.

Любая помощь будет оценена по достоинству.

var day1 = new Date(); 
day1.setDate(day1.getDate() - 7); 
var day2 = new Date(); 
day2.setDate(day2.getDate() - 6); 
var day3 = new Date(); 
day3.setDate(day3.getDate() - 5); 
var day4 = new Date(); 
day4.setDate(day4.getDate() - 4); 
var day5 = new Date(); 
day5.setDate(day5.getDate() - 3); 



var chart = c3.generate({ 
    data: { 
     x: 'x', 
     columns: [ 
      ['x', day1, day2, day3, day4, day5], 
      ['data1', 30, 200, 100, 400, 150, 250] 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     rotated: true, 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%m-%d', 
       rotate: 75 
      } 
     }, 
     y: { 
      tick: { 
       rotate: 75 
      } 
     } 
    } 
}); 

Answer 1

Хмм. Вам, вероятно, придется вручную позиционировать x-ticks, используя D3.

Что-то вроде в примере.

var day1 = new Date(); 
 
day1.setDate(day1.getDate() - 7); 
 
var day2 = new Date(); 
 
day2.setDate(day2.getDate() - 6); 
 
var day3 = new Date(); 
 
day3.setDate(day3.getDate() - 5); 
 
var day4 = new Date(); 
 
day4.setDate(day4.getDate() - 4); 
 
var day5 = new Date(); 
 
day5.setDate(day5.getDate() - 3); 
 

 

 

 
var chart = c3.generate({ 
 
    data: { 
 
    x: 'x', 
 
    columns: [ 
 
     ['x', day1, day2, day3, day4, day5], 
 
     ['data1', 30, 200, 100, 400, 150, 250] 
 
    ], 
 
    type: 'bar' 
 
    }, 
 
    axis: { 
 
    rotated: true, 
 
    x: { 
 
     type: 'timeseries', 
 
     tick: { 
 
     format: '%m-%d', 
 
     rotate: 75 
 
     } 
 
    }, 
 
    y: { 
 
     tick: { 
 
     rotate: 75 
 
     } 
 
    } 
 
    } 
 
}); 
 

 
$("button").click(function(){ 
 
    d3.selectAll(".c3-axis-y text").attr("transform", "rotate(75)").attr("y", -1).attr("x", 0).style("text-anchor", "start").style("display", "block"); 
 
    d3.selectAll(".c3-axis-y tspan").attr("x", 0).attr("dy", ".71em").attr("dx", 7.72) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<button>Reposition</button> 
 
<div id='chart' />