javascript - plottable.js 条形图离轴渲染

Question

我不明白为什么这样一个基本的条形图会脱离页面。轴限制似乎只取最小值。这是一个显示我的问题的 js fiddle ，代码也粘贴在下面。

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)
		.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");

<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>