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

您必须更改refImage.onload = function(){ refImage.style.position = "absolute"; refImage.style.left = "0px"; refImage.style.top = "400px"; refImage.style.transform = "scaleY(-1)"; refImage.style.opacity = "0.4"; divElement.appendChild(refImage); }数据，以便它使用query: { multi_match: { query: "some cooler", type: "most_fields", fields: ["info1", "info2", "info3"] } }使用的wins索引，以便将两个数据集正确映射到一起。改变这将使得年份显示在x轴上。

＆＃13;

0-6

＆＃13;

years

＆＃13;

Chrome给了我一个错误，指出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>并且它已在JSFiddle上正确导入，并在此处在Stack Snippet上上方。

Flotr2.js | xaxis标签没有显示

1 个答案: