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。

示例中的内容。

＆＃13;

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)

});

＆＃13;

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

＆＃13;

轴旋转时无法旋转y轴刻度文本

1 个答案: