Javascript Amcharts 3D图表-类别轴与值轴错误混合

我正在使用3D的amcharts（即depth3D=40），图表显示良好，但类别轴与值轴重叠/合并

我用的是这样的东西：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "startDuration": 1,   
  "valueAxes": [{
    "id": "v1",
    "title": "Cost (in USD)",
    "position": "left",
    "autoGridCount": false,
    "labelFunction": function(value) {
      return "$" + Math.round(value);
    }
  }, {
    "id": "v2",
    "title": "Effort ( hh:mm )",
    "gridAlpha": 0,
    "position": "right",
    "autoGridCount": false,
    "duration": "mm",
    "durationUnits": {
      "hh": "h ",
      "mm": "min"
     }
  }],

  ---------------------
  ---------------------

 "depth3D": 40,
 "angle": 10,    
  "chartCursor": {
    "pan": true,
    "cursorPosition": "mouse",
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
    "fullWidth": true,
    "valueLineAlpha": 0.2
  },
  "categoryField": "lob",
   "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha":0.9,
        "axisThickness": 1,                     
        "axisColor": "black",        
        "gridAlpha":0,
        "labelRotation":25,
        "fontSize":10,
        "boldLabels":true

    },

这是我的

它是与类别轴合并/混合的值轴（红色）

---

任何避免轴合并/重叠的建议都将不胜感激

当您使用angle/depth3D启用3D时，图表透视图将移动。你看到的红线是价值轴线的一部分，由于新的透视图，它延伸到了3D空间，所以它是设计的；请注意，如果在相反方向设置角度，另一个轴也会这样做。因此，无法使用配置来删除此项。作为一种技巧，您可以尝试直接通过

draw

事件编辑SVG，方法是查询设置为true的并修改

d

属性：

function remove3DSegment() {
  var line = document.querySelector('.value-axis-v2 .amcharts-axis-line');
  var lineSVG = line.getAttribute('d');
  line.setAttribute('d', lineSVG.substr(0, lineSVG.lastIndexOf(' '))); //last part of the SVG path command contains the 3D segment on the bottom
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "startDuration": 1,
  "addClassNames": true,
  // ...
  "listeners": [{
    "event": "drawn",
    "method": remove3DSegment
  }],
  // ...
});

如果要对其进行概括，可以让函数通过事件查找图表的id和值轴的id

function remove3DSegment(e) {
  var divId = e.chart.div.id;
  var valueAxisId = e.chart.valueAxes[1].id; //assumes your second axis is the one that needs to be modified.
  var line = document.querySelector('#' + divId + ' .value-axis-' + valueAxisId + ' .amcharts-axis-line');
  var lineSVG = line.getAttribute('d');
  line.setAttribute('d', lineSVG.substr(0, lineSVG.lastIndexOf(' '))); //last part of the SVG path command contains the 3D segment on the bottom
}

请注意，这是一个黑客行为，如果用于绘制轴的SVG path命令在未来的v3版本中发生更改，那么这可能会中断

函数remove3DSegment（）{
var line=document.querySelector（'.value-axis-v2.amcharts-axis line'）；
var lineSVG=line.getAttribute（'d'）；
line.setAttribute（'d'，lineSVG.substr（0，lineSVG.lastIndexOf（“”））；
}
var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“串行”，
“主题”：“光”，
“起始持续时间”：1，
“addClassNames”：true，
“价值轴”：[{
“id”：“v1”，
“标题”：“成本（美元）”，
“位置”：“左”，
“自动签名计数”：错误，
“labelFunction”：函数（值）{
返回“$”+数学舍入（值）；
}
}, {
“id”：“v2”，
“标题”：“努力（hh:mm）”，
“gridAlpha”：0，
“位置”：“正确”，
“axisAlpha”：0.9，
"厚度":二,，
“红色”：“红色”，
}],
“图表”：[{
“id”：“g4”，
“valueAxis”：“v1”，
“线条颜色”：“3B7610”，
“填充颜色”：“3B7610”，
“填充字母”：1，
“类型”：“列”，
“标题”：“每年节省成本”，
“valueField”：“成本节约”，
“群集”：错误，
“柱宽”：0.3，
“顶部半径”：1，
//“legendValueText”：“$[[value]]M”，
“BallooText:“[[title]]
$[[value]]M”
}, {
“id”：“g1”，
“valueAxis”：“v2”，
“子弹”：“圆形”，
“Bullet BorderAlpha”：1，
“bulletColor”：“FFFFFF”，
“bulletSize”：5，
“HidebulletScont”：50，
“线宽”：2，
“线条颜色”：“20acd4”，
“类型”：“平滑线”，
“标题”：“每年节省的工作量”，
“顶部半径”：0.95，
“useLineColorForBulletBorder”：正确，
“valueField”：“轻松保存”，
“气球文本”：“[[title]]
[[value]]”
}],
“深度3D”：40，
“角度”：10，
“图表光标”：{
"泛":对,，
“光标位置”：“鼠标”，
“cursorAlpha”：0.1，
“光标颜色”：“#000000”，
“全宽”：正确，
“valueLineAlpha”：0.2
},
“类别字段”：“lob”，
“分类法”：{
“网格位置”：“开始”，
“axisAlpha”：0.9，
"厚度":1,，
“axisColor”：“黑色”，
“gridAlpha”：0，
“唇瓣旋转”：25，
“字体大小”：10，
“粗体标签”：正确
},
“传奇”：{
“水平差距”：5，
“maxColumns”：30，
“useGraphSettings”：正确，
“市场化”：10，
“左边距”：0，
“valueText”：”
},
“气球”：{
“边界厚度”：1，
“阴影Alpha”：0
},
“出口”：{
“已启用”：真
},
“听众”：[{
“事件”：“已绘制”，
“方法”：remove3DSegment
}],
“数据提供者”：[{
“lob”：“abca”，
“省力”：64140，
“节省成本”：3600
}, {
“lob”：“dfasdf”，
“省力”：326724，
“节约成本”：1875年
}, {
“lob”：“dfgsdfgt”，
“省力”：36864，
“节省成本”：1500美元，
}, {
“lob”：“gfsdg”，
“省力”：101808，
“节省成本”：3614，
}, {
“lob”：“FGF”，
“省力”：13200，
“节省成本”：6215，
}, {
“lob”：“jytujty”，
“省力”：111312，
“节省成本”：3123，
}, {
“lob”：“erqwr”，
“省力”：5040，
“节省成本”：1235，
}]
});
#chartdiv{
宽度：100%；
高度：500px；
}

由于我在文档上使用了4个不同的图形，因此document.querySelect（）需要特定于该特定的图形，请建议我是否应该修改“.value-axis-v2.amcharts axis line”
-v2
对应于文档中右侧值轴的id。如果您在每个图表中使用不同的id，您可以改为修改调用，以获取值轴id的参数或内联每个特定图表的函数，并相应地调整querySelector调用。如果您仍然需要帮助，请摆弄与您的设置大致匹配的4个图表。我已尝试复制类似的问题（具有不同ID的图表“chartdiv1”、“chartdiv2”、“chartdiv3”、“chartdiv4”），请再见！我更新了我的回复，介绍了如何概括函数，并更新了你的提琴。如果有帮助，请告诉我。谢谢，它正在工作（），但是如果我在文档中添加另一个id为“chartdiv0”的图表，它将中断（）