个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 18:25:14 24 4
gpt4 key购买 nike

我只是想知道在 Dimple.js 中是否可以根据 y 轴值突出显示条形？我有一个包含 3 个系列的条形图 - X 作为 CategoryAxis (RefNum)，Y 作为 MeasureAxis(以 K 为单位)，Y2 作为 PctAxis(以 % 为单位)。在条形图的顶部，我们画一条线，使用 javascript 计算(例如帕累托图)。所以我们的想法是改变这些条形的颜色，这些条形超过(Y2)的 80%，或者可能将它们灰化，以及如何突出显示它们。正在挖掘 Dimple.js API 文档，但那里什么也没有......另外，我尝试创建一个简单的 IF ELSE 语句

myChart.defaultColors= [ new dimple.color("blue"), ];

但没有任何运气...这是否可能，因为我找不到任何文档或教程...理想情况下，我们希望有这样的东西: enter image description here对 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); enter image description here

但我需要该图表如下所示: enter image description here

关于如何执行此操作有什么想法吗？预先感谢您的帮助和努力。

最佳答案

我会直接将其添加到 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>

<小时/>

编辑

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

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

关于javascript - 是否可以根据 y 轴值突出显示 Dimple.js 条形图中的条形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39291542/

24 4 0
文章推荐： javascript - 当用户 "sees"元素时激活 JavaScript？
文章推荐： CSS:如何修复一个面板并滚动另一个面板？
文章推荐： html - 如何让我的导航在不同的屏幕尺寸上显示完整？
文章推荐： python - 在 Django 中创建自定义用户模型时，从 models.Model 和 AuthUser 继承有什么区别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com