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

Question

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

javascriptchartsc3.js

3

我正在尝试按照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

请问您能帮我理解一下我做错了什么吗？或者这是C3.js的限制吗?

非常感谢您分享知识和见解！

- aaron.kyle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aaron.kyle · Accepted Answer

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

我不清楚它们先后顺序的重要性。如果有见解，我会很高兴。

谢谢！