如何使用 JavaScript Plottable 并排绘制两个图

Question

我尝试使用以下脚本制作并排饼图

var pies;
var indata = [
            { 'sample' : "Foo",
              "pies_pct":[
                            {
                                "score": 6.7530200000000002,
                                "celltype": "Bcells"
                        },
                        {
                            "score": 11.432763461538459,
                            "celltype": "DendriticCells"
                        }]

            },
            { 'sample' : "Bar",
              "pies_pct":[
                            {
                                "score": 26.8530200000000002,
                                "celltype": "Bcells"
                        },
                        {
                            "score": 31.432763461538459,
                            "celltype": "BCells"
                        }]

            },
    ];
    


processData(indata);
function processData(data) {

        pies = data.map(function (data) {
            return {
                title : data.sample,
                dataset : data.pies_pct
            };
            
            
    });
    
    buildPlots();
}
    
function buildPlots () {
        var $pieContainer = $('#sample-pies');

        pies.forEach(function (pie, index) {
            var elementId = "sample-pie-" + index;

            $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
                .css({width: '200px', height: '200px', display: 'inline-block'})
                .attr('id', elementId)
                .appendTo($pieContainer);


            plotSamplePie(pie.title, pie.dataset, '#' + elementId);
        });


    }
    
    

   
    function plotSamplePie(title,purity_data,targetElement) {
            var scale = new Plottable.Scales.Linear();
            var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728',
                     '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'];
            var colorScale = new Plottable.Scales.Color();
            var legend = new Plottable.Components.Legend(colorScale);
            colorScale.range(tableau20);


      

        var titleLabel = new Plottable.Components.TitleLabel(title);
        var plot = new Plottable.Plots.Pie()
            .addDataset(new Plottable.Dataset(purity_data))
            .attr("fill", function(d) { return d.score; }, colorScale)
            .sectorValue(function(d) { return d.score; }, scale)
            .labelsEnabled(true);
            .renderTo(targetElement);

       
    }

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />


</head>

<body>

 
My Plot

  <!-- Show histograms -->
  <div id="sample-pies"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>

 



</body>

</html>

所以这个函数确实

processData()读取数据，
buildPlots()逐块读取饼图数据
plotSamplePie()画个人饼图。

但为什么不起作用？

我希望它显示这样的情节：

Answer 1

如果您可以在控制台中看到，则表示存在简单错误。

var plot = new Plottable.Plots.Pie()
            .addDataset(new Plottable.Dataset(purity_data))
            .attr("fill", function(d) { return d.score; }, colorScale)
            .sectorValue(function(d) { return d.score; }, scale)
            .labelsEnabled(true);
            .renderTo(targetElement);

只需在 .labelsEnabled(true) 之后删除 ;;它应该可以工作。

var indata = [
            { 'sample' : "Foo",
              "pies_pct":[
                            {
                                "score": 6.7530200000000002,
                                "celltype": "Bcells"
                        },
                        {
                            "score": 11.432763461538459,
                            "celltype": "DendriticCells"
                        }]

            },
            { 'sample' : "Bar",
              "pies_pct":[
                            {
                                "score": 26.8530200000000002,
                                "celltype": "Bcells"
                        },
                        {
                            "score": 31.432763461538459,
                            "celltype": "BCells"
                        }]

            },
    ];
    


processData(indata);
function processData(data) {

        pies = data.map(function (data) {
            return {
                title : data.sample,
                dataset : data.pies_pct
            };
            
            
    });
    
    buildPlots();
}
    
function buildPlots () {
        var $pieContainer = $('#sample-pies');

        pies.forEach(function (pie, index) {
            var elementId = "sample-pie-" + index;

            $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
                .css({width: '200px', height: '200px', display: 'inline-block'})
                .attr('id', elementId)
                .appendTo($pieContainer);


            plotSamplePie(pie.title, pie.dataset, '#' + elementId);
        });


    }
    
    

   
    function plotSamplePie(title,purity_data,targetElement) {
            var scale = new Plottable.Scales.Linear();
            var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728',
                     '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'];
            var colorScale = new Plottable.Scales.Color();
            var legend = new Plottable.Components.Legend(colorScale);
            colorScale.range(tableau20);


      

        var titleLabel = new Plottable.Components.TitleLabel(title);
        var plot = new Plottable.Plots.Pie()
            .addDataset(new Plottable.Dataset(purity_data))
            .attr("fill", function(d) { return d.score; }, colorScale)
            .sectorValue(function(d) { return d.score; }, scale)
            .labelsEnabled(true)
            .renderTo(targetElement);

       
    }

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />


</head>

<body>

 
My Plot

  <!-- Show histograms -->
  <div id="sample-pies"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>

 



</body>

</html>

如何使用 JavaScript Plottable 并排绘制两个图

How to make two plots side-by-side using JavaScript Plottable

html

javascript

plottable