高级图表- Xrange图表事件问题

Question

我正在使用高图集的x范围图表模块来呈现多个值的范围。我在执行它的过程中有几个问题。

1. hover和select状态对图表没有任何影响。
2. legend图标没有显示数据的颜色。

代码如下：

​

var myChart7 = Highcharts.chart('sample', {
  chart: {
    type: 'xrange',
  },
  title: null,
  xAxis: {
    opposite: true,
    labels: {
      useHTML: true,
      formatter: function() {
        return this.value + "ms";
      },
    }
  },
  yAxis: {
    title: {
      text: ''
    },
    labels: {
      enabled: true,
    },
    categories: [],
    reversed: true
  },
  tooltip: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true
      },
      allowPointSelect: true,
      states: {
        hover: {
          color: '#a4edba'
        },
        select: {
          color: '#EFFFEF',
          borderColor: 'black',
          dashStyle: 'dot'
        }
      },
      pointWidth: 15,
      borderRadius: 10,
      dashStyle: 'Solid',
    }
  },
  legend: {
    enabled: true,
    align: 'left',
  },
  series: [{
      color: '#C4D9FF',
      name: 'Sample 1',
      data: [{
        x: 0,
        x2: 90,
        y: 0,
        response: '200',
        color: '#C4D9FF',
        borderColor: '#789CDF',
      }],
    },
    {
      color: '#FFD7C5',
      name: 'Sample 2',
      data: [{
        x: 5,
        x2: 70,
        y: 1,
        response: '200',
        color: '#FFD7C5',
        borderColor: '#F99B6F',
      }],

    }, {
      color: '#DCFFF5',
      name: 'Sample 3',
      data: [{
        x: 35,
        x2: 70,
        y: 2,
        response: '400',
        color: '#DCFFF5',
        borderColor: '#35C097',
      }],
    }
  ],
});

<div id="sample">

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>

​

JSFiddle链路

我不知道我是以正确或错误的方式实现它。请引导我。蒂娅。

我正在开发mac上的Chrome版本85。还没有在其他浏览器上测试过。

Answer 1

1. 这些特性还没有在您正在使用的高级图表版本中实现。在当前版本中，一切都很好：https://jsfiddle.net/BlackLabel/trxjw4np/
2. 在x范围系列类型中，图例项不会继承该系列的颜色，但可以通过编程方式设置它。

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

events: {
    load() {
        let chart = this;
        
        chart.legend.allItems.forEach(item => {
            item.legendSymbol.css({
                fill: item.userOptions.color
            })
        })
    }
}

API：https://api.highcharts.com/highcharts/chart.events.load