0

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

JSFIDDLE。

这是代码：

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 中的屏幕完全空白。

4

1 回答 1

0

您必须更改wins数据，以便它使用相同的0-6索引，years以便将两个数据集正确映射到一起。改变它将使年份显示在 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 上正确导入。

于 2016-07-20T21:46:28.647 回答