NVD3 图表出现问题，按数组中数据的顺序显示 x 轴答案

【问题标题】：Trouble with NVD3 Graph showing x-axis in order of the data in arrayNVD3 图表出现问题，按数组中数据的顺序显示 x 轴
【发布时间】：2016-04-10 01:26:11
【问题描述】：

我正在将 Flash 图转换为基于 js NVD3 ( D3 ) 的折线图，但在 x 轴的顺序上遇到了困难。

我希望 x 轴数据显示为（当前月份倒数 12 个月）：

二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月、一月

但图表库将 Jan 放在前面，然后从右侧的 Dec 到左侧的 jan 画一条线。

我有以下代码：

<script>

nv.addGraph(function() {
	
	var months = ["Jan","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
	
	var thisYear = [], lastYear = []
	
	thisYear.push( {x: 2, y: 101034} );
  thisYear.push( {x: 3, y: 229948} );
  thisYear.push( {x: 4, y: 278940} );
  thisYear.push( {x: 5, y: 370409} );
  thisYear.push( {x: 6, y: 254532} );
  thisYear.push( {x: 7, y: 201229} );
  thisYear.push( {x: 8, y: 221323} );
  thisYear.push( {x: 9, y: 210640} );
  thisYear.push( {x: 10, y: 174958} );
  thisYear.push( {x: 11, y: 172434} );
  thisYear.push( {x: 12, y: 13527} );
  lastYear.push( {x: 1, y: 0} );
  
  lastYear.push( {x: 2, y: 380996} );
  lastYear.push( {x: 3, y: 214687} );
  lastYear.push( {x: 4, y: 123827} );
  lastYear.push( {x: 5, y: 171242} );
  lastYear.push( {x: 6, y: 155463} );
  lastYear.push( {x: 7, y: 163326} );
  lastYear.push( {x: 8, y: 209324} );
  lastYear.push( {x: 9, y: 165603} );
  lastYear.push( {x: 10, y: 147929} );
  lastYear.push( {x: 11, y: 154803} );
  lastYear.push( {x: 12, y: 85055} );
  lastYear.push( {x: 1, y: 9005} );
	
	var myData = [
    {
      values: thisYear,
      key: 'This Year',
      color: '#ff7f0e'
    },
    {
      values: lastYear,
      key: 'Last Year',
      color: '#2ca02c'
    }
  ];
	
  var chart = nv.models.lineChart()
                .margin({left: 100})
                .useInteractiveGuideline(true) 
                .showLegend(true)
                .showYAxis(true)
                .showXAxis(true);
  
  chart.xAxis
  	.axisLabel('Month of Year')
    .tickValues([1,2,3,4,5,6,7,8,9,10,11,12])
    .tickFormat(function(d){
      return months[d]
    });

  chart.yAxis     //Chart y-axis settings
      .axisLabel('$ ex GST Turnover');
      
  d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.   
      .datum(myData)         //Populate the <svg> element with chart data...
      .call(chart);          //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
});
</script>

它会呈现一个如下所示的图形：

这是旧闪存图的示例：

所以我的问题是：如何按照数组中的顺序将“Jan”移动到右侧？

感谢您的时间和帮助。 PS。（如果有人想知道所有数组推送都是来自服务器端代码的动态）

【问题讨论】：

您是否尝试过将日期格式化为日期，我认为这将有助于解决此问题。
目前还没有，因为来自闪存图的现有查询仅将月份输出为整数，我将把月份视为日期并尝试一下

标签： javascript arrays d3.js nvd3.js

【解决方案1】：

我设法通过使用服务器代码动态地获得所需的输出，将月份 js 数组中的月份顺序输出为：

var 月 = ["","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov", "十二月","一月"];

我通过循环遍历图形数据并将月份的前 3 个字符作为字符串名称输出来做到这一点。数组中的位置 0 为 ""，因为日历中没有月份 0。

然后在推送行中而不是 x = {monthOfYear} 我将其更改为 x = {loop index} 因此数据从 1 到 12 排序。然后当引用月份数组“Jan”时排名第 12 位，导致“Jan”被放置在最右侧。

感谢那些调查这个问题的人。

【讨论】：