Question

当我将鼠标悬停在单个条形图上时，我需要将堆叠的列（Highcharts）未选中的条纹调暗。

当前代码：

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-percent/

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]
});

Answer 1

要更改telemetryClient.TrackEvent( "the event", new Dictionary<string,string> { {"UserGroup", theUserGroup } } );参数，您可以使用alpha对象和方法Highcharts.Color。

定义系列选项如下

brighten(Number: alpha)

更改堆栈颜色的功能可以是这样的：

plotOptions: {
  column: {
    stacking: 'percent',
    stickyTracking: false,
    states: {
      hover: {
        enabled: false
      }
    },
    point: {
      events: {
        mouseOver: updateStackColor(0.2), // brighten / dim color
        mouseOut: updateStackColor(0) // recover original color
      }
    }
  }
},

示例：https://docs.microsoft.com/en-us/azure/application-insights/app-insights-usage-segmentation

Highcharts在悬停时暗淡未选择的条形颜色

1 个答案: