Question

您好我在这里将数据设置为条形图：

 setDatosBarra: function(data){ //

    var self = this;
    var horaEstim = 0;
    var horaReal = 0;
    var horaTotal = 0;

    if(data[0].horas_estim != '-'){
        horaEstim = data[0].horas_estim;
    }
    if(data[0].horas_real != '-'){
        horaReal = data[0].horas_real;
    }
    if(data[0].total_horas != '-'){
        horaTotal = data[0].total_horas;
    }
    var datosBarra =[{data: [[0,horaEstim]], color: "#691717"}, {data: [[1,horaReal]], color: "#173D69"},{data: [[2,horaTotal]], color: "#176469"}];

    self.flotLinea(datosBarra);
},

当一切准备就绪后，我将数据发送到self.flotBar;

这是flotBar函数：

flotBar: function(datos){

     var self = this;

    if(datos == 0){
      var data = [["SIN REGISTROS",0]];
    }else{
      var data = datos;

    }

    function getTooltip(label, x, y) {
        return "<strong style='font-size:18px;'> " + y + " </strong> horas"; 
    }

    var plot = $.plot("#placeholder",data, {
        series: {
            bars: {
                show: true,
                barWidth: 0.3,
                align: "center",
                lineWidth: 0,
                fill:.75
            }
        },
        xaxis: {
            ticks: [[0,"Horas estimadas"],[1,"Horas reales"],[2,"Total horas"]],
            mode: "categories",
            tickLength: 0
        },
        grid: {
            hoverable: true,
            clickable: true
        },


        tooltip: true,

            tooltipOpts : {
                content : getTooltip,
                defaultTheme : false
        },
    });


},

好的，这是我的问题，例如：

我在dropDown中选择一个选项：

条形图如下所示：

如果我在dropDown中选择其他选项：

条形图如下所示：

如果我再次选择第一个选项＆＃34; Correcion de errores＆＃34;，条形图如下所示：

所以..总是第一次我显示条形图看起来像在第一个图像中，数字在行中，但如果我选择其他选项看起来不错。我总是需要看好条形图，而不是在我选择其他选项时。我使用的是flot javascript库。我怎样才能解决这个问题？抱歉，我的英文

Answer 1

所述问题的主要问题是我们没有所有代码。实质上，您应该提供所有代码，或者将问题缩小到显示问题的内容，然后提供所有代码。据我猜测，你在其他地方有一些其他代码正在绘制初始图表。第二次及以后的时间？画得好。为了支持我的断言，请注意在初始图像中，x轴刻度标记的标题（同样是条形本身）右对齐不居中。

为了好玩，我写了一个快速的jsFiddle，它使用一个按钮显示how to switch datasets（就像你想要的下拉菜单一样）并重绘图表：

    drawChart = function(index) {
        var chartData = getDataForChart(rawData[index]);
        if (chart) {
            chart.setData(chartData);
            chart.draw();
        }
        else {
            chart = $.plot("#barchart", chartData, chartOptions);
       }
    },
    switchDataset = function() {
        datasetIndex = (datasetIndex + 1) % datasetCount;            
        drawChart(datasetIndex);
    };

$("#switchButton").on("click", switchDataset);

因为我决定将新数据加载到图表中而不是从头开始重新绘制（说实话我看不出真正的区别），这意味着我必须预先计算y轴的最大值：

    calcValueMax = function() {
        var max = 0;
        rawData.forEach(function(values) {
            values.forEach(function(value) {
                if (value > max) {
                    max = value;
                }
            });
        });
        return max;
    },
    // other code
    chartOptions.yaxis.max = calcValueMax();

希望有所帮助。

更改数据前条形图看起来很糟糕

1 个答案: