添加行3D柱形图Highcharts

我使用highcharts做一个项目，目前一些数据图表，在2D做它完美的作品：添加行3D柱形图Highcharts

Chart working in 2D

这是一套每个月的百分比，用红线表示目标百分比，以便轻松查看一组数据是否超过或低于该百分比。

现在的问题是，我试图让3D给它更多的是“流行”，我包括3D库，并启用它，但图形原来是这样的：

Chart NOT working in 3D

即使条形图按预期方式显示，线条就会混乱起来，远离它应该在的地方。

我试过从样条变成散布没有成功。有没有人有任何想法，我可以如何解决这个问题，或者可能是一个不同的方式来呈现这个“目标”，以便您可以轻松地看到哪些酒吧是在它之上或之下。

在此先感谢！

PS：这是JSON为我使用了3D的Highcharts选项：

{ 
 
    "chart": { 
 
    "options3d": { 
 
     "enabled": true, 
 
     "alpha": 0, 
 
     "beta": 0, 
 
     "depth": 20 
 
    } 
 
    }, 
 
    "title": { 
 
    "text": "Title" 
 
    }, 
 
    "xAxis": { 
 
    "categories": [ 
 
     "a", 
 
     "b" 
 
    ], 
 
    "crosshair": false, 
 
    "gridLineWidth": 1, 
 
    "min": 0, 
 
    "max": 1 
 
    }, 
 
    "yAxis": { 
 
    "floor": 98, 
 
    "ceiling": 100, 
 
    "title": { 
 
     "text": "%" 
 
    } 
 
    }, 
 
    "plotOptions": { 
 
    "column": { 
 
     "pointPadding": 0.2, 
 
     "borderWidth": 0 
 
    }, 
 
    "scatter": { 
 
     "width": 10, 
 
     "height": 100, 
 
     "depth": 10 
 
    } 
 
    }, 
 
    "series": [ 
 
    { 
 
     "name": "ENERO", 
 
     "type": "column", 
 
     "data": [ 
 
     99.8, 
 
     99.77 
 
     ] 
 
    }, 
 
    { 
 
     "name": "FEBRERO", 
 
     "type": "column", 
 
     "data": [ 
 
     100, 
 
     99.83 
 
     ] 
 
    }, 
 
    { 
 
     "lineWidth": 1, 
 
     "name": "Meta (99.8%)", 
 
     "type": "scatter", 
 
     "color": "#FF0000", 
 
     "marker": { 
 
     "enabled": false 
 
     }, 
 
     "legend": { 
 
     "enabled": false 
 
     }, 
 
     "data": [ 
 
     [ 
 
      -1, 
 
      99.8, 
 
      2 
 
     ], 
 
     [ 
 
      2, 
 
      99.8, 
 
      2 
 
     ] 
 
     ] 
 
    } 
 
    ] 
 
}

来源

2017-07-14 José Colina

折线图不完全支持3D，但如果你的目标是只画一条线，你可以使用的故事情节。演示：http://jsfiddle.net/v66zt28y/ –

我已经将此行为报告为一个错误。查看github问题跟踪器 - https://github.com/highcharts/highcharts/issues/6972 – morganfree

@SebastianBochan非常感谢。如果你想把它作为一个解决方案发布，所以我可以选择它，因为我认为它是最接近我将解决我的问题（它足够满足我需要）。再次，谢谢。 –

折线图不完全支持3D，但如果你的目标是绘制只有一行，你可以使用plotLines。

"yAxis": { 
    "plotLines":[{ 
     "value": 99.5, 
     "width": 2, 
     "color": 'red' 
    }], 
    "floor": 98, 
    "ceiling": 100, 
    "title": { 
     "text": "%" 
    } 
},

演示：

http://jsfiddle.net/v66zt28y

来源

2017-07-17 14:41:42

添加行3D柱形图Highcharts

回答

相关问题