Javascript 是否可以根据y轴值高亮显示Dimple.js条形图中的条形图？_Javascript_D3.js_Dimple.js

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

javascript d3.js

Javascript 是否可以根据y轴值高亮显示Dimple.js条形图中的条形图？,javascript,d3.js,dimple.js,Javascript,D3.js,Dimple.js,我只是想知道，在Dimple.js中，是否可以基于y轴值高亮显示条？我有一个条形图，其中3个系列-X作为分类轴（RefNum），Y作为度量轴（K's），Y2作为PctAxis（in%）。在这些条的顶部，我们画了一条线，用javascript计算（如帕累托图）。因此，我们的想法是改变那些超过80%（Y2）的条形图的颜色，或者将它们变灰，好吧，一些人如何突出它们。正在挖掘Dimple.js API文档，但那里什么都没有。。。此外，我还尝试在上创建一个简单的IF-ELSE语句 myChart.Defa

我只是想知道，在Dimple.js中，是否可以基于y轴值高亮显示条？我有一个条形图，其中3个系列-X作为分类轴（RefNum），Y作为度量轴（K's），Y2作为PctAxis（in%）。在这些条的顶部，我们画了一条线，用javascript计算（如帕累托图）。因此，我们的想法是改变那些超过80%（Y2）的条形图的颜色，或者将它们变灰，好吧，一些人如何突出它们。正在挖掘Dimple.js API文档，但那里什么都没有。。。此外，我还尝试在上创建一个简单的IF-ELSE语句

myChart.DefaultColor=[ 新酒窝。颜色（“蓝色”），]

但是没有任何运气。。。有可能吗，因为我找不到任何文档或教程。。。理想情况下，我们希望有这样的产品：对d3不是很熟悉，也许可以通过它找到一些解决方案？我们使用dimple.js2.1.6和d3.v3 谢谢你的帮助

以下是迄今为止的完整代码：

<!DOCTYPE html>


var svg=dimple.newSvg（“#chartContainer”、“100%”、“100%”）；
var数据=[
{“项目”：“一”，“成本”：3586900，“参考”：“AB-46”}，
{“项目”：“二”，“成本”：1509270，“参考”：“AB-47”}，
{“项目”：“三”，“成本”：1409250，“参考”：“AB-48”}，
{“项目”：“四”，“成本”：1305270，“参考”：“AB-49”}，
{“项目”：“五”，“成本”：1109270，“参考”：“AB-50”}，
{“项目”：“六”，“成本”：1009270，“参考”：“AB-51”}，
{“项目”：“七”，“成本”：909270，“参考”：“AB-52”}，
{“项目”：“八”，“成本”：809270，“参考”：“AB-53”}]；
/***获得总成本****/
var totalAmount=0；
对于（变量i=0；i0）{
数据[i]['CumulativeAmount']=数据[i]。成本+数据[i-1]。累积数；
}否则{
数据[i]['CumulativeAmount']=数据[i]。成本；
}
}
//根据累计金额和总额计算累计百分比，四舍五入%
对于（变量i=0；i


这就是我向x轴添加订单规则时发生的情况，例如x.addOrderRule（“Ref”，true）

但我需要这样的图表：

你有没有想过怎么做？！提前感谢您的帮助和努力
 我会将此添加到直线d3
。比如：
myChart.svg.selectAll(".dimple-bar").filter(function(d) {
  return d.y > 60
}).style("fill", "red");

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

工作示例：


var svg=dimple.newSvg（“图表容器”，590400）；
风险值数据=[{
x:'一'，
y:10
}, {
x:'两'，
y:80
}, {
x:'三'，
y:70
}, {
x:'四'，
y:30
}, {
x:'五'，
y:20
}, {
x:'六'，
y:6
}];
var myChart=new dimple.chart（svg，数据）；
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（函数（d）{
返回d.y>60
}).样式（“填充”、“红色”）；
我会将此添加到straightd3
中。比如：
myChart.svg.selectAll(".dimple-bar").filter(function(d) {
  return d.y > 60
}).style("fill", "red");

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

工作示例：


var svg=dimple.newSvg（“图表容器”，590400）；
风险值数据=[{
x:'一'，
y:10
}, {
x:'两'，
y:80
}, {
x:'三'，
y:70
}, {
x:'四'，
y:30
}, {
x:'五'，
y:20
}, {
x:'六'，
y:6
}];
var myChart=new dimple.chart（svg，数据）；
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（函数（d）{
返回d.y>60
}).样式（“填充”、“红色”）；
谢谢您的回复。看起来不错，但是，我已经更新了这个问题（我真的应该先这样做，但是…），我有两个Y轴，一个代表000'中的数字，一个代表百分比。您的解决方案与t完全兼容
myChart.svg.selectAll(".dimple-bar").filter(function(d) {
  return d.y > 60
}).style("fill", "red");