Javascript 使Highcharts看起来像多个系列的进度条

我一直在尝试修改highcharts条形图的外观，并设法使水平条形图看起来像进度条形图。我遵循这一点是为了做到这一点。现在，我有两个问题。如果我有一个数据系列，图表看起来很好，但如果我有多个系列（最多可以有3个系列），下面是它的外观

因此，我想增加标签之间的差距（美国，日本等）。其次，我想将数据标签（10、40、20等）对准图表右侧的条形图之外。我想我需要编写一些javascript，但我不确定从哪里开始，或者修改什么。感谢您的帮助。 谢谢

var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
类型：'bar'，
背景颜色：“#003755”，
marginBottom:60，
marginLeft:80，
玛金托普：40，
marginRight:140
},
颜色：['#0AA3DB'、'#3AC6B1'、'#000612']，
xAxis：[{
类别：[‘美国’、‘日本’、‘加拿大’、‘巴西’、‘中国’、‘俄罗斯’、‘英国’、‘法国’、‘NA’]，
标签：{
对齐：“左”，
x:0,，
y:-13，/*根据钢筋数量进行调整*/
风格：{
fontSize：“0.875雷姆”，
颜色：'#fff'
}
},
lineColor:'透明'，
长度：0
}],
亚克斯：{
线宽：0，
网格线宽：0，
标签：{
已启用：false
}
},
打印选项：{
酒吧：{
数据标签：{
allowOverlap：是的，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”
}
},
系列：{
pointWidth:8，//列栏的宽度，与图表大小无关
边界半径：5，
边框颜色：“透明”，
点填充：0，
分组填充：0，
数据标签：{
启用：对，
格式：“{point.y:，.0f}”，
分享：是的，
是的，
对齐：“右”
}
}
},
出口：{
已启用：false
},
学分：{
已启用：false
},
工具提示：{
样本：2
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:“{point.name}-{point.y:，.0f}%”，
分享：是的，
useHTML:true
},
系列：[{
名称：“当前”，
类型：'bar'，
数据：[{
名称：'美国'，
y:10
}, {
名称:"日本",，
y:40
}, {
名称：‘加拿大’，
y:20
}, {
名称：“巴西”，
y:5
}, {
名称:"中国",，
y:9
}, {
名称:"俄罗斯",，
y:8
}, {
名称：‘英国’，
y:7
}, {
名称：“法国”，
y:1
}, {
姓名：'NA'，
y:0
}]
}, {
名称:"2005",，
类型：'bar'，
数据：[{
名称：'美国'，
y:10
}, {
名称:"日本",，
y:40
}, {
名称：‘加拿大’，
y:20
}, {
名称：“巴西”，
y:5
}, {
名称:"中国",，
y:9
}, {
名称:"俄罗斯",，
y:8
}, {
名称：‘英国’，
y:7
}, {
名称：“法国”，
y:1
}, {
姓名：'NA'，
y:0
}]
}, {
名称：'2023'，
类型：'bar'，
数据：[{
名称：'美国'，
y:10
}, {
名称:"日本",，
y:40
}, {
名称：‘加拿大’，
y:20
}, {
名称：“巴西”，
y:5
}, {
名称:"中国",，
y:9
}, {
名称:"俄罗斯",，
y:8
}, {
名称：‘英国’，
y:7
}, {
名称：“法国”，
y:1
}, {
姓名：'NA'，
y:0
}]
}]
});

---

使用

groupPadding

增加列组之间的空间

dataLabels.align

的默认值为

left

（标签左侧的点）-此值应用于将数据标签定位在条形图之外

---

现场工作演示：

API参考资料：

---

正如我在评论中所说，这可能是一种可能的解决方案。它使用显示如何在轴中滚动的。它使用highstock.js文件，可以应用于常规Highcharts轴

var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
类型：'bar'，
背景颜色：“#003755”，
marginBottom:60，
marginLeft:80，
玛金托普：40，
marginRight:140，
活动：{
加载：函数（）{
var-maxVal=0；
对于（var i=0；imaxVal）{
maxVal=Math.max.apply（Math，this.series[i].yData）
}
}
this.yAxis[0].setextrems（0，maxVal+10）
}
}
},
颜色：['#0AA3DB'、'#3AC6B1'、'#000612']，
xAxis：[{
类别：[‘美国’、‘日本’、‘加拿大’、‘巴西’、‘中国’、‘俄罗斯’、‘英国’、‘法国’、‘NA’]，
标签：{
对齐：“左”，
x:0,，
y:-20，
/*根据钢筋数量进行调整*/
风格：{
fontSize：“0.875雷姆”，
颜色：'#fff'
}
},
lineColor:'透明'，
长度：0，
分:0,，
最高：4，
滚动条：{
已启用：true
},
}],
亚克斯：{
线宽：0，
网格线宽：0，
标签：{
已启用：false
}
},
打印选项：{
酒吧：{
分组：对，
点填充：0，
数据标签：{
allowOverlap：是的，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”
}
},
系列：{
pointWidth:8，//列栏的宽度，与图表大小无关
边界半径：5，
边框颜色：“透明”，
数据标签：{
启用：对，
//格式：“{point.y:.1f}”，
格式：“{point.y:，.0f}”，
分享：是的，
是的，
溢出：“无”
}
}
},
出口：{
已启用：false
},
学分：{
已启用：false
},
工具提示：{
样本：2
},
工具提示：{
headerFormat:“{series.name}
”，
var chart = new Highcharts.Chart({
chart: {
  renderTo: 'container',
  type: 'bar',
  backgroundColor: '#003755',
  marginBottom: 60,
  marginLeft: 80,
  marginTop: 40,
  marginRight: 140
  },
  colors: ['#0AA3DB', '#3AC6B1', '#000612'],
  xAxis: [{
    categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
    labels: {
      align: 'left',
      x: 0,
      y: -13,/* to be adjusted according to number of bars*/
      style: {
        fontSize: "0.875rem",
        color: '#fff'
      }
    },
    lineColor: 'transparent',
    tickLength: 0
  }],
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      dataLabels: {
        allowOverlap: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    },
    series: {
      pointWidth: 8, //width of the column bars irrespective of the chart size
      borderRadius: 5,
      borderColor: 'transparent',
      pointPadding: 0,
      groupPadding: 0,
      dataLabels: {
        enabled: true,
        format: '<b>{point.y:,.0f}</b>',
        shared: true,
        useHTML: true,
        align: 'right'
      }
    }
  },
  exporting: {
    enabled: false
  },

  credits: {
    enabled: false
  },
  tooltip: {
    yDecimals: 2
  },
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
    shared: true,
    useHTML: true
  },
  series: [{
    name: 'Current',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2005',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2023',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }]
});