Question

我只是想知道在Dimple.js中是否可以根据y轴值突出显示条形图？我有一个3系列的条形图 - X作为CategoryAxis（RefNum），Y作为MeasureAxis（在K中），Y2作为PctAxis（以％表示）。在条形图的顶部，我们绘制一条线，使用javascript（例如帕累托图）计算。因此，我们的想法是改变那些超过80％（Y2）的条纹的颜色，或者可能是灰色的那些，以及一些突出它们的颜色。正在挖掘Dimple.js API文档，但没有任何内容......另外，我试图在

上创建一个简单的IF ELSE语句

myChart.defaultColors = [ new dimple.color（“blue”），];

但没有任何运气......是否有可能，因为我找不到任何文档或教程...理想情况下，我们希望有这样的东西：不太熟悉d3，可能有一些解决方案可以通过它吗？我们使用dimple.js 2.1.6和d3.v3 任何帮助表示感谢，谢谢。

到目前为止，这是完整的代码：

<!DOCTYPE html>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>

</head>

<div id="chartContainer" style="height: 450px"></div>
<div id="chartContainer2" style="height: 450px"></div>  

 <script>


 var svg = dimple.newSvg("#chartContainer", "100%", "100%");
 var data =[
 { "Project":"one","Cost":3586900, "Ref":"AB-46" },
 { "Project":"two","Cost":1509270, "Ref":"AB-47" },
 { "Project":"three","Cost":1409250, "Ref":"AB-48" },
 { "Project":"four","Cost":1305270, "Ref":"AB-49" },
 { "Project":"five","Cost":1109270, "Ref":"AB-50" },
 { "Project":"six","Cost":1009270, "Ref":"AB-51" },
 { "Project":"seven","Cost":909270, "Ref":"AB-52" },
 { "Project":"eight","Cost":809270, "Ref":"AB-53" } ];

/*** get the total Cost ****/
var totalAmount = 0;
for(var i = 0; i < data.length; i++){
data[i].Cost = +data[i].Cost;
totalAmount += data[i].Cost;

if(i > 0){
   data[i]['CumulativeAmount'] = data[i].Cost + data[i-1].CumulativeAmount;
}else{
  data[i]['CumulativeAmount'] = data[i].Cost;
}
}


// calculate cumulative % from the cumulative amounts & total, round %
  for(var i = 0; i < data.length; i++){
  data[i]['CumulativePercentage'] = (data[i]['CumulativeAmount'] / totalAmount );
  data[i]['CumulativePercentage'] = parseFloat(data[i]['CumulativePercentage'].toFixed(2));
  }

var myChart= new dimple.chart(svg, data);
x = myChart.addCategoryAxis("x", "Ref");
//x.addOrderRule("x", "Ref");

y = myChart.addMeasureAxis("y", "Cost");
y2 = myChart.addMeasureAxis("y", "CumulativePercentage");
y2.tickFormat = "%";
y2.overrideMin = 0;
y2.overrideMax = 1;

var y3 = myChart.addPctAxis("y", "CumulativePercentage");   
y3.hidden = true;

s = myChart.addSeries(null, dimple.plot.bar, [x, y]);
s2 = myChart.addSeries(null, dimple.plot.line, [x, y2]);
s2.lineWeight = 3;                  

/***** get the value of the 80% of 'CumulativePercentage'   */
s3 = myChart.addSeries(null, dimple.plot.area, [x, y2]);

/**** make it invisible, to use custom d3 line later on *****/
s3.lineWeight = 0;

/****** get the 80% of cumulative percentages ****/
s3.data = [{
    "CumulativePercentage": 0.8
}]; 

myChart.draw(1500);

/***** draw a vertical line at 80% of calculated cumulative percentage line on top of the bars *****/

        svg.append("line")
           .attr("x1", x._scale(s3.data["CumulativePercentage"]))
           .attr("x2", x._scale(s3.data["CumulativePercentage"]))
           .attr("y1", myChart._yPixels())
           .attr("y2", myChart._yPixels() + myChart._heightPixels())
           .style("stroke", "red")
           .style("stroke-dasharray", "15")                                                                                                                             
 </script>
 </body>
 </html>

当我向x轴添加订单规则时会发生这种情况，例如： x.addOrderRule("Ref", true);

但我需要这个图表如下：

有关如何执行此操作的任何想法？！在此先感谢您的帮助和努力。

Answer 1

我会用直接d3添加它。类似的东西：

myChart.svg.selectAll(".dimple-bar").filter(function(d) {
  return d.y > 60
}).style("fill", "red");

myChart是您的酒窝图，d.y > 60是您的标准（ y 是保存y2值的数据变量）。

工作示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
</head>

<body>

  <div id="chartContainer"></div>

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [{
      x: 'one',
      y: 10
    }, {
      x: 'two',
      y: 80
    }, {
      x: 'three',
      y: 70
    }, {
      x: 'four',
      y: 30
    }, {
      x: 'five',
      y: 20
    }, {
      x: 'six',
      y: 6
    }];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addCategoryAxis("x", "x");
    myChart.addMeasureAxis("y", "y");
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw();


    myChart.svg.selectAll(".dimple-bar").filter(function(d) {
      return d.y > 60
    }).style("fill", "red");
    
  </script>
</body>

</html>

<强> EDITS

我怀疑问题可能是你实际上没有绑定到第二轴的任何数据。因此，如果您想要相对于轴的条形值，您可以这样做：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
</head>

<body>

  <div id="chartContainer"></div>

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [{
      x: 'one',
      y: 10,
      anotherY: 1
    }, {
      x: 'two',
      y: 80,
      anotherY: 2
    }, {
      x: 'three',
      y: 70,
      anotherY: 3
    }, {
      x: 'four',
      y: 30,
      anotherY: 4
    }, {
      x: 'five',
      y: 20,
      anotherY: 5
    }, {
      x: 'six',
      y: 6,
      anotherY: 6
    }];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addCategoryAxis("x", "x");
    var y = myChart.addMeasureAxis("y", "y");
    var anotherY = myChart.addMeasureAxis("y", "anotherY");
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw();

    console.log(myChart);

    myChart.svg.selectAll(".dimple-bar").filter(function(d) {
      var val_of_bar_on_other_scale = anotherY._scale.invert(y._scale(d.y));
      return val_of_bar_on_other_scale > 2
    }).style("fill", "red");
    
  </script>
  
</body>

</html>

是否可以根据y轴值突出显示Dimple.js条形图中的条形图？

1 个答案: