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

Question

在图表中，我想根据用户输入可视化数据的可用性。为此，我想使用 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),
    x2:Date.UTC(2020,3,3),
    y:0
  })
  diadata.push({
    x:Date.UTC(2020,4,4),
    x2:Date.UTC(2020,5,5),
    y:0
  })
  diag.addSeries({
    name:name2,
    data: diadata,
    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,
        data: diadata,
        dataLabels: {
            enabled: true
        }
    }]
   });

});

Answer 1

前两个要求很容易实现。

您需要在点选项中定义颜色：

diadata.push({
  x: Date.UTC(2020, 1, 1),
  x2: Date.UTC(2020, 6, 6),
  y: 0,
  color: 'blue'
})

yAxis - 如果您想在第二行添加第二个系列并显示 yAxis 类别，您需要通过设置 y:

diadata.push({ x: Date.UTC(2020, 2, 2), x2: Date.UTC(2020, 3, 3), 是：1，颜色：'green' })
这个比较棘手。滚动条不是在 Highcharts 中实现的，而是在 Highstock 中实现的。

请在 Highcharts 中分析这个自定义解决方案：Highcharts Zooming with Scroll Bar

或者这个使用 Highstock 的：

演示：https://jsfiddle.net/BlackLabel/npotr1x3/

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

Dynamic colors and y-Axis descriptions in Highcharts

javascript

diagram

highcharts