自定义图表建议

Question

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

Answer 1

我用过Fusion Charts. Its pretty easy to customize and it works well in all browsers. Also have a look at Chart JS。它非常酷而且是开源的

Answer 2

我喜欢amCharts。无所不能，免费使用。

Answer 3

我已经使用 Chart.js 一段时间了。虽然乍一看它很可爱，而且你真的可以用它做一些开箱即用的超级棒的东西，但当你需要做一些 simple/custom 文档中没有的细节时，它可能会在以后真正受到限制.例如：图表外的标签；关闭条形图的背景，具有 1 个值的甜甜圈条（例如 - 我有甜甜圈图，值为 20%，我希望差异被着色 - 你不能那样做）。

当然，所有这些东西都可以通过自定义 .js 文件并扩展它来解决和制作，但是如果你没有时间这样做并且你想退出盒子解决方案，你可能会被简单的细节所困，所以我建议阅读 full docs 看看它是否符合你的要求。

Answer 4

我会推荐 D3.js，但要注意学习曲线很陡；让我试着解释一下：

在 chart.js、chartist 等中，您提供数据、图表类型和一些配置，您就拥有了自己的图表。在 D3 中，它有点复杂，因为 D3 通过您设计和指定的 Dom 元素提供显示数据和与数据交互的框架。（主要是 svg，尽管您也可以使用 div、spans 等）

虽然一开始感觉令人生畏，而且文档基本上是一个 API Reference, there are hundreds of examples，但您可以将其用作基础或灵感。

Answer 5

我一直在使用 (ChartJS, Morris, Inline Charts) 作为仪表板。自定义图表可能对您有很大帮助

Answer 6

我会推荐 Chartist.js。它完全响应，具有极大的灵活性和 DPI 依赖性。

您可以在@media 查询和大量动画选项中使用 CSS 设置图表样式。他们给出了带有代码的折线图、条形图、饼图示例。所以它一定会对你有所帮助。

Answer 7

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

通过 stack plugin 的隐藏和堆叠栏发挥创意可以让您代表自己的界限。对于每组边界，您需要用下限值创建一个隐藏条，然后用上限值创建一个可见条（并将两者叠加）。通过将 stack 选项设置为相同的键，可以轻松指定哪些条应相互堆叠。

设置好柱状图后，下一步就是设置图表的选项。 grid marking handles displaying the current value. Hiding 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 8

Google 给你一个有趣的图表库。

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

Answer 9

这是 HighCharts. I adapted the 'Stacked and grouped column' example at 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"
        }]
    });
});

自定义图表建议

Custom chart suggestions

javascript

css

charts

flot