如何编辑 C3.js 折线图刻度格式以显示特定类型的标签

如何解决如何编辑 C3.js 折线图刻度格式以显示特定类型的标签

如何编辑 c3.js 折线图上的 x 轴刻度格式以显示“年-年”格式？

我正在构建一个图表来显示食品银行的使用率不断上升，但我收到的数据是针对财政年度的，例如2019 年 4 月 - 2020 年 3 月，而不是日历年。

但是，我不知道如何将我的 x 轴标签格式设置为“年-年”，例如'2019-2020'。我能展示的最多的是“2019-2019”。

请在下面找到我的代码。任何建议将不胜感激！

<script type="text/javascript" src="js/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/c3.min.js"></script>
<style media="screen">

.container {
    max-width:700px;
    margin: 0 auto;
    font-family: Helvetica;
    line-height: 1.4em;
}

  #chart1 {
    max-width: 690px;
    margin: 0 auto;
    font: 16px sans-serif;
  }
</style></head>

<div id="chart1"></div>

<script type="text/javascript">
var foodparcels = ['Emergency three day food supplies given out by The Trussell Trust food banks',25899,40898,61468,128697,346992,913138,1084604,1109309,1182954,1332952,1583668,1900122]
var years = ['year','2008-2009','2009-2010','2010-2011','2011-2012','2012-2013','2013-2014','2014-2015','2015-2016','2016-2017','2017-2018','2018-2019','2019-2020'];

var chart = c3.generate({
    bindto: '#chart1',padding: {
              top: 10,right: 40,bottom: 10,left: 80,},size: {
            height: 320,data: {
      x:'year',columns: [years,foodparcels],xFormat: '%Y-%Y'
    },axis: {
      x: {
          type: 'timeseries',tick: {
              format: '%Y-%m',count: 12,outer: false
              // centered: true
                }
          },y : {
        tick: {
            yformat:d3.format(" "),outer: false,}
        },legend: {
      position: 'bottom'
    },color: {
      pattern: ['#FBB43F']
    },point: {
      show: true
    },grid: {
      x: {
 show: false
      }
          }
});

</script>

解决方法

如何使用类别轴而不是时间序列？ https://c3js.org/samples/categorized.html

您的 x 标签不完全是时间序列。

示例 https://jsfiddle.net/vtakr1e2/5/

var foodparcels = ['Emergency three day food supplies given out by The Trussell Trust food banks',25899,40898,61468,128697,346992,913138,1084604,1109309,1182954,1332952,1583668,1900122]
var years = ['2008-2009','2009-2010','2010-2011','2011-2012','2012-2013','2013-2014','2014-2015','2015-2016','2016-2017','2017-2018','2018-2019','2019-2020'];

var chart = c3.generate({
    bindto: '#chart1',padding: {
              top: 10,right: 40,bottom: 10,left: 80,},size: {
            height: 320,data: {
      columns: [foodparcels]
    },axis: {
      x: {
          type: 'category',categories: years,tick: {
      rotate: 45
    }
          
          },y : {
        tick: {
            yformat:d3.format(" "),outer: false,}
        },legend: {
      position: 'bottom'
    },color: {
      pattern: ['#FBB43F']
    },point: {
      show: true
    },grid: {
      x: {
 show: false
      }
          }
});

.container {
    max-width:700px;
    margin: 0 auto;
    font-family: Helvetica;
    line-height: 1.4em;
}

  #chart1 {
    max-width: 690px;
    margin: 0 auto;
    font: 16px sans-serif;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

<div id="chart1"></div>