条形图在更改数据之前看起来很糟糕答案

【问题标题】：Bar chart looks bad before change data条形图在更改数据之前看起来很糟糕
【发布时间】：2015-11-09 18:28:39
【问题描述】：

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

 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
        },
    });

 
},

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

我在下拉菜单中选择一个选项：

条形图看起来像这样：

如果我在下拉菜单中选择其他选项：

条形图如下所示：

如果我再次选择第一个选项“Correcion de errores”，条形图如下所示：

所以.. 我第一次显示条形图时总是看起来像第一张图片中的数字，但如果我选择其他选项看起来不错。我需要始终看到良好的条形图，而不仅仅是在我选择其他选项时。我正在使用浮点 javascript 库。我怎样才能解决这个问题？对不起，我的英语

【问题讨论】：

您在第一个代码中调用 flotLinea() 而不是 flotBar()。这是同一个功能吗？你能把你所有的代码都放在fiddle吗？

标签： javascript jquery bar-chart flot

【解决方案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();

希望对您有所帮助。

【讨论】：