【发布时间】：2016-09-02 11:41:09
【问题描述】：
我只是想知道在 Dimple.js 中是否有可能根据 y 轴值突出显示条形？我有一个包含 3 个系列的条形图 - X 作为 CategoryAxis（RefNum），Y 作为 MeasureAxis（以 K 为单位），Y2 作为 PctAxis（以 % 为单位）。在条形图的顶部，我们画了一条线，使用 javascript 计算（例如帕累托图）。所以想法是改变那些条的颜色，它们超过 80%（Y2），或者可能是灰色的，以及一些如何突出它们。正在挖掘 Dimple.js API 文档，但那里什么也没有……另外，我尝试在
上创建一个简单的 IF ELSE 语句myChart.defaultColors= [ 新酒窝.color("蓝色"), ];
但是没有任何运气...有可能吗，因为我找不到任何文档或教程...理想情况下，我们希望有这样的东西： 对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);
关于如何执行此操作的任何想法？！提前感谢您的帮助和努力。
【问题讨论】：
标签： javascript d3.js dimple.js