自定义图表建议

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>

Answer 2

我使用过Fusion Charts。它非常容易定制，并且适用于所有浏览器。另请查看Chart JS。它非常酷，它的开源

Answer 3

我一直在使用Chart.js。虽然初看起来很甜，而且你真的可以用开箱即用的东西做超级棒的东西，但是当你遇到需要做一些不在文档中的简单/自定义细节的时候，它可能真的会受到限制。例如：图表外的标签;关闭条形图的背景，1个值的甜甜圈条（例如 - 我有圆环图，价值20％，我希望差异被着色 - 你不能这样做）。

当然所有这些东西都可以通过自定义.js文件进行处理和扩展，并扩展它但如果你没有时间并且你想要开箱即用的解决方案，你可以被困在简单的细节上，所以我建议你阅读full docs，看看是否取决于你的预算。

Answer 4

我建议D3.js注意学习曲线陡峭;让我试着解释一下：

在诸如chart.js，chartist等之类的东西中，你提供了数据，图表类型和一些配置，你就有了你的图表。在D3中，它提供了一个框架，用于通过您设计和指定的Dom元素显示和交互数据。（主要是svg＆＃39; s虽然你也可以使用div，span等）< / p>

虽然最初感觉令人生畏，而且文档基本上是API Reference，但您可以使用hundreds of examples作为基础或灵感。

Answer 5

我一直在使用（ChartJS，Morris，Inline Charts）作为信息中心。它可以帮助您定制图表

Answer 6

我会推荐Chartist.js。它具有很强的灵活性和DPI依赖性。

你可以在@media查询和很多动画选项中用CSS设置你的图表样式。他们给出了折线图，条形图，带代码的饼图的例子。所以它肯定会对你有所帮助。

Answer 7

我喜欢amCharts。 可以做各种各样的东西，可以免费使用。

Answer 8

Google为您提供了一个有趣的图表库。

可能想尝试一下，但它需要您连接到Google才能运行（无法离线运行）。

Answer 9

以下是HighCharts的照片。我在http://www.highcharts.com/demo/column-stacked-and-grouped修改了“堆叠和分组列”示例。 显然，要使标签和轴正确，还有一些工作要做，但我认为这是一个好的开始。

jsFiddle http://jsfiddle.net/saevj2n4/1/

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

的JavaScript

$(function () {
    Highcharts.chart('container', {

        chart: {
            type: 'column',
            width: 200,
            height: 1000
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Profit']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                //groupPadding: .45,
                pointPadding: 0,
                //pointWidth: 40,
            }
        },

        series: [{
            name: 'Min',
            data: [59.28 - 21.58 ],
            stack: 'Last Year',
            color: "#919191"
        }, {
            name: 'Max',
            data: [21.58 ],
            stack: 'Last Year',
            color: "transparent"           
        }, {
            name: 'Min',
            data: [ 57.15 - 32.5 ],
            stack: 'Last Month',
            color: "#6095c9"         
        }, {
            name: 'Max',
            data: [32.50],
            stack: 'Last Month',
            color: "transparent"
        }, {
            name: 'Min',
            data: [54.81 - 47.14 ],
            stack: 'Last Week',
            color: "#745f8e"
        }, {
            name: 'Max',
            data: [47.14],
            stack: 'Last Week',
            color: "transparent"
        }]
    });
});