Question

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

结果应如下所示：desired-output

我尝试过遵循C3.js提供的示例'X Axis Tick Values'：c3js.org/samples/axes_x_tick_values.html。

我在这个例子中使用'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

我通过在y轴的参数之前移动x轴的参数来解决这个问题：

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

...然而，我不清楚为什么首先出现这个问题。我很乐意见解。

谢谢！

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

1 个答案: