Question

我正在使用dimple.js在图中绘制两个条形图。小节A和小节B的宽度相同。我希望“小节A”条的宽度大于“小节B”条的宽度。但是我做不到。下面是我的代码

var svg = dimple.newSvg("body", 800, 600);
// Data for the left axis
var data1 = [
  { "Day":"Monday", "Measure":"A", "Value":20 },
  { "Day":"Tuesday", "Measure":"A", "Value":30 },
  { "Day":"Wednesday", "Measure":"A", "Value":40},
  { "Day":"Thursday", "Measure":"A", "Value":50 },
  { "Day":"Friday", "Measure":"A", "Value":60 },
  { "Day":"Saturday", "Measure":"A", "Value":70 },
  { "Day":"Sunday", "Measure":"A", "Value":80 }

];
// Data for the right axis
var data2 = [

  { "Day":"Monday", "Measure":"B", "Value":10 },
  { "Day":"Tuesday", "Measure":"B", "Value":20 },
  { "Day":"Wednesday", "Measure":"B", "Value":30},
  { "Day":"Thursday", "Measure":"B", "Value":40 },
  { "Day":"Friday", "Measure":"B", "Value":50 },
  { "Day":"Saturday", "Measure":"B", "Value":60 },
  { "Day":"Sunday", "Measure":"B", "Value":70 }
];
// Create the chart without data
var chart = new dimple.chart(svg);
// Create the days on x with measures nested inside
var x1 = chart.addCategoryAxis("x", ["Day", "Measure"]);
x1.addOrderRule([
  "Monday", "Tuesday", "Wednesday", "Thursday", 
  "Friday", "Saturday", "Sunday"]);
// Add 2 y axes with titles matching the measure column
var y1 = chart.addMeasureAxis("y", "Value");
y1.title = "A";
var y2 = chart.addMeasureAxis(y1, "Value");
y2.title = "B";
// Create the first series  mapped to the left hand side
var s1 = chart.addSeries("Measure", dimple.plot.bar, [x1, y1]);
s1.data = data1;
// Create the second series mapped to the right hand side
var s2 = chart.addSeries("Measure", dimple.plot.bar, [x1, y2]);
s2.data = data2;
// Draw the chart with bounce for no good reason
chart.staggerDraw = true;
chart.ease = "bounce";
chart.draw(1000);

<html>
<head>
<meta name="description" content="Grouped Bars On Separate Axes" />
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
</head>
<body>

</body>
</html>

更改堆栈条形图中的条形宽度

0 个答案: