自定义图表建议

问题描述 投票：3回答：9

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

enter image description here

javascript css charts flot
9个回答
4
投票

我知道你可能没有找到解释如何在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>
1
投票

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

1
投票

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

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

1
投票

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

在chart.js，chartist等等你提供数据，图表类型和一些配置，你就有了你的图表。在D3中，它提供了一个框架，用于通过您设计和指定的Dom元素显示和交互数据。（主要是svg，尽管你也可以使用div，span等）

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

1
投票

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

1
投票

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

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

0
投票

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

0
投票

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

可能想尝试，但它需要您连接到谷歌才能工作（无法离线运行）。

0
投票

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

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

HighCharts Chart

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"
        }]
    });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.