Javascript 高图表-垂直和水平梯度

Javascript 高图表-垂直和水平梯度,javascript,charts,highcharts,Javascript,Charts,Highcharts,我用HighCharts做一些简单的条形图。图表有时是水平条形图,有时是垂直条形图。有没有办法根据渐变顺序和阴影是水平还是垂直来修改渐变顺序和阴影 以下是我在js中设置的开始: 功能构建图(cType、cTitle、categoriesX、titleY、seriesData1、iPercent){ 垂直图表看起来是正确的,从亮到暗,阴影在右边: 但水平方向是反向的。顶部应该是亮的。底部是暗的,下面是阴影: 如何翻转渐变和阴影,但仅限于水平条形图?实际上,您所说的是两种不同的图表类型。您所指的

我用HighCharts做一些简单的条形图。图表有时是水平条形图,有时是垂直条形图。有没有办法根据渐变顺序和阴影是水平还是垂直来修改渐变顺序和阴影

以下是我在js中设置的开始:

功能构建图(cType、cTitle、categoriesX、titleY、seriesData1、iPercent){

垂直图表看起来是正确的,从亮到暗,阴影在右边:

但水平方向是反向的。顶部应该是亮的。底部是暗的,下面是阴影:


如何翻转渐变和阴影,但仅限于水平条形图?

实际上,您所说的是两种不同的图表类型。您所指的水平条形图在高图中只是
类型:“条形图”
。而垂直条形图在高图中只是
类型:“列”
高图。以下是关于如何控制每种类型的着色的示例:


我更新了答案以显示如何控制阴影偏移宽度和颜色。我在设置阴影时遇到了问题。我的系列是通过两个变量设置的:系列:[{name:titleY,data:seriesData1}]当我添加阴影时,一切都没有改变。你知道为什么吗?你的页面中必须包含
var flipLabels = 0,
    labelSpace = 40,
    labelWidth = 160,
    labelHeight = 60,
    labelAlign = 'center',
    labelSize = 12,
    labelSpacingY = 30,
    labelSpacingX = 0,
    yAxisLineColor = null,
    yAxisTitle = '',
    chartWidth = 800, //$('#chart_modal').width(),
    chartHeight = (60 * categoriesX.length) + 150,
    perShapeGradient = {
        x1:0,
        y1:0,
        x2:1,
        y2:0
    },
    gradientBuild = [
        [0, '#6482fb'],
        [1, '#5775df']
    ];