c3.js |设置 x 轴刻度文本的问题

Question

按照 C3.js 网站上的示例，我正在尝试为图表上的 x 轴提供自定义标签。

结果应该是这样的：desired-output

我尝试按照 C3.js:c3js.org/samples/axes_x_tick_values.html 提供的示例“X 轴刻度值”进行操作。

我在这个例子中同时使用了“timeseries”和“category”（无济于事）：...c3js.org/samples/categorized.html

这是我对 JS Fiddle 的尝试之一：https://jsfiddle.net/qvsdvh8w/9/

这里是javascript：

var chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: [
      ['x', 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
      ['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],
      ['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674]
    ],
    axes: {
      'total budget': 'y2'
    },
    types: {
      'open cases': 'bar' // ADD
    }
  },
  axis: {
    y: {
      label: {
        text: 'open cases',
        position: 'outer-middle'
      }
    },
    y2: {
      show: true,
      label: {
        text: 'total budget',
        position: 'outer-middle'
      }
    }
  },
  x: {
    type: 'timeseries',
    tick: {
      values: ['FY00', 'FY01', 'FY02', 'FY03', 'FY04', 'FY05', 'FY06', 'FY07', 'FY08', 'FY09', 'FY10', 'FY11', 'FY12', 'FY13', 'FY14', 'FY15', 'FY16', 'FY17']
    },
  },
});

我还尝试按照此处显示的方法进行标记，其中字符串值在 x 轴数据列中提供。

...c3js.org/samples/axes_x_tick_rotate.html

但是，这种方法完全破坏了图形：

...jsfiddle.net/qvsdvh8w/11/

你能帮我理解我做错了什么吗？还是这是 C3.js 的限制？

提前感谢您分享您的知识和见解！

Answer 1

我通过将 x 轴的参数移到 y 轴的参数之前解决了这个问题：

https://jsfiddle.net/qvsdvh8w/14/

var chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: [
      ['x', 'FY00', 'FY01', 'FY02', 'FY03', 'FY04', 'FY05', 'FY06', 'FY07', 'FY08', 'FY09', 'FY10', 'FY11', 'FY12', 'FY13', 'FY14', 'FY15', 'FY16', 'FY17'],
      //['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],//
      ['new eligible cases', 0, 7, 3, 10, 9, 17, 6, 10, 7, 11, 16, 12, 19, 26, 38, 46, 43, 41],
      ['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674],
      ['carry-over cases', 0, 0, 7, 2, 5, 2, 6, 7, 12, 7, 7, 12, 14, 16, 16, 17, 9, 10],
      ['expensed contingency', null, null, null, null, 317500, 451500, 428688, 0, 287715, 613107, 768000, 743627, 706836, 753836, 799929, 732580, 877496, 911825]
    ],
    axes: {
      'total budget': 'y2',
      'expensed contingency': 'y2'
    },
    groups: [
      ['carry-over cases', 'new eligible cases']
    ],
    types: {
      //'open cases': 'bar',//
      'carry-over cases': 'bar',
      'new eligible cases': 'bar', // ADD
    }
  },
  axis: {
    x: {
      type: 'category',
      tick: {
        rotate: -45,
        multiline: false
      },
      height: 40
    },
    y: {
      label: {
        text: 'open cases',
        position: 'outer-middle'
      }
    },
    y2: {
      show: true,
      max: 10000000,
      min: 0,
      padding: {
        top: 0,
        bottom: 0
      },
      label: {
        text: 'total budget',
        position: 'outer-middle'
      }
    }
  },
});

... 然而，我不清楚为什么哪个先出现很重要。我很乐意提供见解。

谢谢！