Question

我试图使用flot图绘制一些信息，但我无法将值显示在图表上。这段代码是模板中包含的演示文件的一部分，所以我修改了它来绘制数据，而不是使用随机值的值，我没有错误，但图表不起作用，希望有人能指出我在正确的方向。

我的代码在这里：

 init: function()
    {
        // apply styling
        charts.utility.applyStyle(this);

        this.plot = $.plot(
            $("#chart_simple"),
            [{
                label: "Jobs", 
                data: this.data.d1,
                lines: {fillColor: "#dd3333"},
                points: {fillColor: "#dd3333"}
            }, 
            {   
                label: "Resumes", 
                data: this.data.d2,
                lines: {fillColor: "#282b30"},
                points: {fillColor: "#282b30"}
            }], this.options);
    }
},

// lines chart with fill & without points
chart_lines_fill_nopoints: 
{

    // chart data
    data: 
    {
        d1: [[1,100], [2,150], [3,100]],
        d2: [[1,100], [2,150], [3,100]]
    },

    // will hold the chart object
    plot: null,

    // chart options
    options: 
    {
        grid: {
            show: true,
            aboveData: true,
            color: "#3f3f3f",
            labelMargin: 5,
            axisMargin: 0, 
            borderWidth: 0,
            borderColor:null,
            minBorderMargin: 5 ,
            clickable: true, 
            hoverable: true,
            autoHighlight: true,
            mouseActiveRadius: 20,
            backgroundColor : { }
        },
        series: {
            grow: {active:false},
            lines: {
                show: true,
                fill: true,
                lineWidth: 2,
                steps: false
            },
            points: {show:false}
        },
        legend: { position: "nw" },
        yaxis: { min: 0 },
        xaxis: {ticks:11, tickDecimals: 0},
        colors: [],
        shadowSize:1,
        tooltip: true,
        tooltipOpts: {
            content: "%s : %y.0",
            shifts: {
                x: -30,
                y: -50
            },
            defaultTheme: false
        }
    },

Answer 1

所以，挖掘一下，我发现你使用的是来自here的javascript。查看一个工作示例here，您已通过以下方式破解了代码：

1。）您似乎不再拥有父charts个对象，所以

charts.utility.applyStyle（本）;

不起作用。

2.。init函数是chart_lines_fill_nopoints对象的一部分，在剪切/粘贴代码中它不再是。

3。）在您的示例代码中，您实际上从未调用init函数来绘制绘图。

4.。）options backgroundColor : { }对于flot无效（也许这是丢失的charts.utility.applyStyle的一部分）。

将所有这些考虑在内here's a fiddle，这使得此代码能够正常运作。

使用上面的代码生成flot图感觉不必要地复杂化。也许在使用这些模板时它是有意义的，但如果你只是用这个作为如何调用flot的一个例子，它就不是很简单。

另外，请在下次发布问题时，包含所有相关信息（例如您找到此代码的位置以及更改方式）。脱离上下文这段代码没有多大意义。

Answer 2

此代码正常运行

//Defining data for the chart

var data= 
{
    d1: [[1,100], [2,150], [3,100]],
    d2: [[1,100], [2,150], [3,100]]
};

//Defining options for the chart
var options=
{
    grid: {
        show: true,
        aboveData: true,
        color: "#3f3f3f",
        labelMargin: 5,
        axisMargin: 0, 
        borderWidth: 0,
        borderColor:null,
        minBorderMargin: 5 ,
        clickable: true, 
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
        backgroundColor : { }
    },
    series: {
        grow: {active:false},
        lines: {
            show: true,
            fill: true,
            lineWidth: 2,
            steps: false
        },
        points: {show:false}
    },
    legend: { position: "nw" },
    yaxis: { min: 0 },
    xaxis: {ticks:11, tickDecimals: 0},
    colors: [],
    shadowSize:1,
    tooltip: true,
    tooltipOpts: {
        content: "%s : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }};

// shorthand for document.ready
$(function(){

    this.plot = $.plot(
        $("#chart_simple"),
        [{
            label: "Jobs", 
            data: data.d1,
            lines: {fillColor: "#dd3333"},
            points: {fillColor: "#dd3333"}
        }, 
        {   
            label: "Resumes", 
            data: data.d2,
            lines: {fillColor: "#282b30"},
            points: {fillColor: "#282b30"}
        }], this.options);
});

查看jsfiddle上的工作示例here。

Flot Graph不绘制数据

2 个答案: