plottable.js軸からの棒グラフのレンダリング

Question

なぜこのような基本的な棒グラフがページから外れるのか理解できません。軸の限界は最小の値しか取らないようです。ここに私の問題を示しているjsフィドルがあり、そのコードも下に貼り付けられています。

http://jsfiddle.net/brennekamp/32hcs0pu/13/

var cityData = [{ 
    "x": 1, 
    "y": "-0.8000000000", 
    "label": "Pre-1990" 
    }, { 
    "x": 2, 
    "y": "-1.5000000000", 
    "label": "1990-2015" 
    }]; 
    var regionData = [{ 
    "x": 5, 
    "y": "-1.7000000000", 
    "label": "Pre-1990" 
    }, { 
    "x": 6, 
    "y": "-1.7000000000", 
    "label": "1990-2015" 
    }]; 

    var colorScale = new Plottable.Scales.Color(); 

    var yScale = new Plottable.Scales.Linear(); 
    var yAxis = new Plottable.Axes.Numeric(yScale, "left"); 

    var title = new Plottable.Components.TitleLabel("Title"); 

    var xScale_city = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]); 
    var xAxis_city = new Plottable.Axes.Category(xScale_city, "bottom"); 
    var plot_city = new Plottable.Plots.Bar() 
    .labelsEnabled(true) 
    .animated(true) 
    .addDataset(new Plottable.Dataset(cityData)) 
    .x(function(d) { 
     return d.label; 
    }, xScale_city) 
    .y(function(d) { 
     return d.y; 
    }, yScale) 
    .attr("fill", function(d) { 
     return d.x % 2 == 1 ? "#0000FF" : "#FF0000"; 
    }, colorScale); 
    var label_city = new Plottable.Components.AxisLabel("City", 0); 

    var xScale_region = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]); 
    var xAxis_region = new Plottable.Axes.Category(xScale_region, "bottom"); 
    var plot_region = new Plottable.Plots.Bar() 
    .labelsEnabled(true) 
    .animated(true) 
    .addDataset(new Plottable.Dataset(regionData)) 
    .x(function(d) { 
     return d.label; 
    }, xScale_region) 
    .y(function(d) { 
     return d.y; 
    }, yScale) 
    .attr("fill", function(d) { 
     return d.x % 2 == 1 ? "#0000FF" : "#FF0000"; 
    }, colorScale); 
    var label_region = new Plottable.Components.AxisLabel("Region", 0); 



    console.log(JSON.stringify(cityData)); 
    console.log(JSON.stringify(regionData)); 


    var chart = new Plottable.Components.Table([ 
    [title], 
    [yAxis, plot_city, plot_region], 
    [null, xAxis_city, xAxis_region], 
    [null, label_city, label_region] 
    ]); 

    chart.renderTo("svg"); 

Answer 1

あなたのyの値は、文字列、数値である必要はありません。

var cityData = [{ 
 
    "x": 1, 
 
    "y": -0.8000000000, 
 
    "label": "Pre-1990" 
 
    }, { 
 
    "x": 2, 
 
    "y": -1.5000000000, 
 
    "label": "1990-2015" 
 
    }]; 
 
    var regionData = [{ 
 
    "x": 5, 
 
    "y": -1.7000000000, 
 
    "label": "Pre-1990" 
 
    }, { 
 
    "x": 6, 
 
    "y": -1.7000000000, 
 
    "label": "1990-2015" 
 
    }]; 
 

 
    var colorScale = new Plottable.Scales.Color(); 
 

 
    var yScale = new Plottable.Scales.Linear(); 
 
    var yAxis = new Plottable.Axes.Numeric(yScale, "left"); 
 

 
    var title = new Plottable.Components.TitleLabel("Title"); 
 

 
    var xScale_city = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]); 
 
    var xAxis_city = new Plottable.Axes.Category(xScale_city, "bottom"); 
 
    var plot_city = new Plottable.Plots.Bar() 
 
    .labelsEnabled(true) 
 
    .animated(true) 
 
\t \t .addDataset(new Plottable.Dataset(cityData)) 
 
    .x(function(d) { 
 
     return d.label; 
 
    }, xScale_city) 
 
    .y(function(d) { 
 
     return d.y; 
 
    }, yScale) 
 
    .attr("fill", function(d) { 
 
     return d.x % 2 == 1 ? "#0000FF" : "#FF0000"; 
 
    }, colorScale); 
 
    var label_city = new Plottable.Components.AxisLabel("City", 0); 
 

 
    var xScale_region = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]); 
 
    var xAxis_region = new Plottable.Axes.Category(xScale_region, "bottom"); 
 
    var plot_region = new Plottable.Plots.Bar() 
 
    .labelsEnabled(true) 
 
    .animated(true) 
 
\t \t .addDataset(new Plottable.Dataset(regionData)) 
 
    .x(function(d) { 
 
     return d.label; 
 
    }, xScale_region) 
 
    .y(function(d) { 
 
     return d.y; 
 
    }, yScale) 
 
    .attr("fill", function(d) { 
 
     return d.x % 2 == 1 ? "#0000FF" : "#FF0000"; 
 
    }, colorScale); 
 
    var label_region = new Plottable.Components.AxisLabel("Region", 0); 
 

 

 

 
    console.log(JSON.stringify(cityData)); 
 
    console.log(JSON.stringify(regionData)); 
 

 

 
    var chart = new Plottable.Components.Table([ 
 
    [title], 
 
    [yAxis, plot_city, plot_region], 
 
    [null, xAxis_city, xAxis_region], 
 
    [null, label_city, label_region] 
 
    ]); 
 

 
    chart.renderTo("svg");

<script type="text/javascript" src="http://dev.atlasofurbanexpansion.org/app/webroot/src/js/d3.min.js"></script> 
 
<script type="text/javascript" src="http://dev.atlasofurbanexpansion.org/app/webroot/src/js/plottable.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://dev.atlasofurbanexpansion.org/app/webroot/dist/css/style.css"> 
 
<svg></svg>