Highcharts中的动态颜色和y轴描述

问题描述

在图表中，我想根据用户输入来可视化数据的可用性。为此，我想使用Highcharts并弄清楚“ xrange”图类型最适合我的需求。数据本身的表示正常，但是我有两个问题：

条形颜色：所有条形具有相同的蓝色。如示例所示，我尝试设置一种无效的颜色。我正在寻找一种解决方案，每个条形都有自己的颜色，而无需我明确定义它。
y轴说明：我希望在y轴上显示桩号。如示例所示，轴上仅显示了一个（village1）
在放大时滚动x轴：用户应该可以在放大后在x轴上滚动

var diadata=[{}];
var names=[];
var title="Some available Data";

name1="village1"
name2="village2"

function displayStation1(){
    names.push(name1);
  diadata.push({
    x:Date.UTC(2020,1,1),x2:Date.UTC(2020,6,6),y:0
  })
  diag.addSeries({
    name:name1,data: diadata,color: "#FF0000"
  })
}

function addStation2(){
    diadata=[];
    names.push(name2);
  diadata.push({
    x:Date.UTC(2020,2,2),3,3),y:0
  })
  diadata.push({
    x:Date.UTC(2020,4,4),5,5),y:0
  })
  diag.addSeries({
    name:name2,color: "#FF0000"
  })
}


document.addEventListener('DOMContentLoaded',function() {
   diag = new Highcharts.chart('diagram',{
   chart: {
        height:250,type: 'xrange',zoomType: 'x'
    },title: {
        text: title
    },xAxis: {
        type: 'datetime'
    },yAxis: {
        title: {
            text: ''
        },categories: names,reversed: true
    },series: [{
        borderColor: 'gray',pointWidth: 20,dataLabels: {
            enabled: true
        }
    }]
   });

});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

diagram highcharts javascript