Question

基本上我需要从MS Office重新创建以下图表+表格：

所以我一直在研究如何将表格集成到这样的图表中。我检查了所有主要的JS图表库，似乎没有一个提供像这样的组合图形。我也开始尝试使用Highcharts创建它，但我很快注意到让它正常工作会非常复杂。所以在我再努力进入该解决方案之前，如果有人知道现有的JS库可以创建一个表格数据附加到底部的图表，并且表格中有图例，我想再次检查一下。

对潜在解决方案的任何帮助或建议都会非常感激。

Answer 1

使用jPlot js

这样的东西

＆＃13;

$(document).ready(function(){
    var s1 = [4.3, 2.5, 3.5, 4.5];
    var s2 = [2.4, 4.4, 1.8, 2.8];
    var s3 = [2, 2, 3, 5];
    var myseries = [s1, s2, s3];
     // Can specify a custom tick Array.
        var ticks = ['Category 1', 'Category 2', 'Category 3', 'Category 4'];
     
    var plot1 = $.jqplot('chart1', [s1, s2, s3], {
        title: {text : "Chart Title"},
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesColors:['#7783ef', '#fcc680', '#878787'],
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
              fillToZero: true,
              barPadding:0,
              barMargin: 10
            },
            pointLabels: {
            show: true,
            hideZeros: false
        }
            
        },
       
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            yaxis: {
                label: 'Axis Title',
                tickOptions: {formatString: '%.2f'}
            }
        }
    });
    
      $( ".jqplot-axis.jqplot-xaxis .jqplot-xaxis-tick" ).each(function( index ) {
     var htm = $(this).html();
     myseries.forEach(function(element) {
          htm = htm + "<div style='vertical-align: middle;'>      "+ element[index] + "<div/>";
     });
     $(this).html(htm);
  });
  
  $( "table.jqplot-table-legend" ).attr("style", "top: 390px")
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.js"></script>


<div id="chart1" style="width: 650px; height: 400px;"></div>

＆＃13;

是否有一个JavaScript库可以创建带有集成表的图表？

1 个答案: