Flotr2.js | xaxis 标签不显示

Question

我正在尝试复制 Stephen A. Thomas（No Starch Press，2015 年）Data Visualization with JavaScript 一书中的介绍性示例

代码如下：

HTML

<div id="chart" style="width:600px;height:300px;"></div>

JS

var wins = [[
    [2006, 13],
    [2007, 11],
    [2008, 15],
    [2009, 15],
    [2010, 18],
    [2011, 21],
    [2012, 28]
]];
var years = [
    [0, "2006"],
    [1, "2007"],
    [2, "2008"],
    [3, "2009"],
    [4, "2010"],
    [5, "2011"],
    [6, "2012"]
]

Flotr.draw(document.getElementById("chart"), wins, {
    bars: {
        show: true,
        barWidth: 0.5
    },
    yaxis: {
        min: 0,
        tickDecimals: 0
    },
    xaxis: {
        ticks: years
    }
});

我面临的问题是标签 (years) 未显示 xaxis。

是什么导致 years 数据未填充？

编辑：Firefox 中不显示年份，Chrome 中屏幕完全空白。

Answer 1

您必须更改 wins 数据，使其使用与 years 相同的 0-6 索引，以便将两个数据集正确映射在一起。更改它将使年份显示在 x 轴上。

var wins = [[[0, 13], [1, 11], [2, 15], [3, 15], [4, 18], [5, 21], [6, 28]]];
var years = [[0, "2006"], [1, "2007"], [2, "2008"], [3, "2009"], [4, "2010"], [5, "2011"], [6, "2012"]];

Flotr.draw(
 document.getElementById("chart"),
 wins,
 {
  title: "Manchester City Wins",
  colors: ["#89AFD2"],
  bars: {
   show: true,
   barWidth: 0.5,
   shadowSize: 0,
   fillOpacity: 1,
   lineWidth: 0
  },
  yaxis: {
   min: 0,
   tickDecimals: 0
  },
  xaxis: {
   ticks: years
  },
  grid: {
   horizontalLines: false,
   verticalLines: false
  }
 }
);

<script src="https://rawgit.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<div id="chart" style="width:600px; height:300px;"></div>

Chrome 给我一个错误，说 Flotr 没有定义，所以我将源更改为指向 https://rawgit.com/HumbleSoftware/Flotr2/master/flotr2.min.js 并在 JSFiddle 和此处正确导入在上面的 Stack Snippet 上。

Flotr2.js | xaxis 标签不显示

Flotr2.js | xaxis labels not showing

javascript

data-visualization

flotr2