javascript - 自定义图表建议

Question

我一直使用 flot.js 来满足常见的图表需求，但​​我想探索新的方法来可视化可能超出此图表库的数据。对于其他人如何以编程方式呈现下面的自定义显示图表的任何建议或建议，我将不胜感激。也许是 CSS？

Answer 1

我知道您可能不是在寻找详细说明如何在 flot 中实现它的答案，但这是一个有趣的练习。

利用 stack plugin 的隐藏和堆叠栏获得创意允许你代表你的界限。对于每组边界，您需要用下限值创建一个隐藏条，然后用上限值创建一个可见条(并将两者叠加)。通过将 stack 选项设置为相同的键，指定哪些条应该相互堆叠很容易。

设置条形图后，下一步是设置图表的选项。 grid marking处理显示当前值。隐藏both axes有效地隐藏了网格。

剩下的就是创建方法来将 div 元素附加到占位符以显示栏值、标签和标记值。

这是您的示例图像的基本实现，真正侧重于图表的 flot 组件。再花一点时间，额外附加的 div 元素的样式可以更接近您的示例。

This JSFiddle包含以下代码以便于查看。

$(function() {
  var data = [{
    data: [ [0, 21.51] ],
    lines: { show: false },
    bars: { show: false },
    stack: 0,
    label: 'Hidden'
  },{
    data: [ [1, 32.50] ],
    lines: { show: false },
    bars: { show: false },
    stack: 1,
    label: 'Hidden'
  },{
    data: [ [2, 47.14] ],
    lines: { show: false },
    bars: { show: false },
    stack: 2,
    label: 'Hidden'
  },{
    data: [ [0, 37.77] ],
    stack: 0,
    label: 'Last Year'
  },{
    data: [ [1, 24.65] ],
    stack: 1,
    label: 'Last Month'
  }, {
    data: [ [2, 7.67] ],
    stack: 2,
    label: 'Last Week'
  }];

  var options = {
    series: {
      bars: { show: true },
      points: { show: false }
    },
    xaxis: { show: false },
    yaxis: { show: false },    
    grid: { 
      show: true,
      borderWidth: 0,
      backgroundColor: null,
      markings: [{ 
        xaxis: { from: 0, to: 3 },
        yaxis: { from: 48.01, to: 48.01 },
        color: "#000000"
      }]
    },
    legend: { show: false }
  };

  var plot = $.plot($('#graph'), data, options);
  var plotData = plot.getData();
  var markings = plot.getOptions().grid.markings;
  
  displayBarValues(plotData);
  displayBarLabels(plotData);
  displayMarkingValues(markings);
  
  // display values next to bars  
  function displayBarValues(plotData) {
    $.each(plotData, function(i, data) {
      var stackedValue = data.data[0][1];
     
      if (data.bars.show) {
        stackedValue = findStackedValue(plotData, data.stack);
      }
    
    	var offset = plot.pointOffset({x: data.data[0][0], y: stackedValue});
    
      $('<div class="data-point-value">-- $' + stackedValue + '</div>').css( {
        left: offset.left + 30,
        top: offset.top - 8,
      }).appendTo(plot.getPlaceholder());
    });
  }

  function findStackedValue(dataSeries, stackNumber) {
    var stackedValue = 0;
    
  	for (var i =0; i < dataSeries.length; i++) {
      if (dataSeries[i].stack === stackNumber) {
        stackedValue = stackedValue + dataSeries[i].data[0][1];
      }
    }
    
    return stackedValue;
  }
  
  // display a marking value
  function displayMarkingValues(markings) { 
    $.each(markings, function(i, marking) {  
      var offset = plot.pointOffset({x: marking.xaxis.to, y: marking.yaxis.to });
    
      $('<div class="data-point-value">------ $' + marking.yaxis.to + '</div>').css( {
        left: offset.left,
        top: offset.top - 8,
      }).appendTo(plot.getPlaceholder());
    });
  }
  
  function displayBarLabels(plotData) {
    $.each(plotData, function(i, data) {
      if (data.bars.show) {
        var stackedValue = findStackedValue(plotData, data.stack);
    	  var offset = plot.pointOffset({x: data.data[0][0], y: stackedValue});
        
        $('<div class="data-point-label">' + data.label + '</div>').css({
          left: offset.left - 35,
          top: offset.top + 50,
        }).appendTo(plot.getPlaceholder());
      }
    });
  }
});

#graph {
  margin: 0 auto;
  text-align: center;
  width: 100px;
  height: 600px;
}

.data-point-value {
  position: absolute;
  white-space: nowrap;
  font-size: 11px;
}

.data-point-label {
  position: absolute;
  white-space: nowrap;
  width: 100px;
  font-size: 11px;
  text-align: right;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>
<script src="https://rawgit.com/flot/flot/master/source/jquery.flot.stack.js"></script>
<div id="graph"></div>