使用 Highcharts 时，如何在堆积柱形图/条形图上的特定列上设置亮度效果？

debugcn 发表于 Dev

金东旭

我正在尝试使用 Highcharts 对堆积条形图上的特定列产生亮度效果。

我想将效果开发为下图右侧的“解决方案”。

现在当鼠标悬停在一个系列或一个列上时，即 Apples-John，可以看到整个条的亮度发生变化

代码： HTML 是

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

代码：JavaScript 是

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: {
                states: {
                    hover: {
                        brightness: -0.3
                }
            }
        }
    },
    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]
    }]
});

What I want to do is to give brightness to four columns of John's when hovering any of John's columns: all of the skyblue columns; if I hover one of the Jane's columns, it is needed to change brightness of all Jane's columns: five black columns in a Jane group.

Vickey

With some css you can achieve it , first add className in the series data like this(you can declare the name as you like right now I'm used the name as the className)

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    className:'John'
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1],
    className:'Jane'
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    className:'Joe'
}]

Once you add the className , after rendering you will find the name in the Highcharts div, what you need to do is add the color which you wants to show on the hove use fill for that.

Example:

#container .highcharts-container .highcharts-series-group .John:hover rect{
   fill: rgb(230, 44, 118);
}

Jsfiddle link: http://jsfiddle.net/karnan796/2fruqw7j/12/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-24

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

使用 Highcharts 时，如何在堆积柱形图/条形图上的特定列上设置亮度效果？

使用 Highcharts 时，如何在堆积柱形图/条形图上的特定列上设置亮度效果？

使用Highcharts在柱形图上应用分页

使用highcharts在柱形图上生成折线图

如何使用Highcharts创建单个系列条形图

使用共享工具提示时，Highcharts柱形图在单击时返回不正确的系列索引

解析 CSV，然后使用数据构建 Highcharts 条形图

Highcharts工具提示错误，带有堆积的柱形图

Highcharts柱形图分组

使用Highcharts的XY轨迹图

Highcharts-使用setData（）更新柱形图不起作用

要求highcharts-browserify使用highcharts的特定版本吗？

如何使用HighCharts创建“开/关”图？

如何使用highcharts显示多个饼图

如何使用 Highcharts 构建彩色树状图

条形图上的Highcharts标记

条形图上的highcharts内线

Highcharts为柱形图创建系列

如何在Highcharts条形图中更改特定的条形颜色？

Highcharts 4.0.3堆积的条形图错误添加-

在Highcharts中对堆积的条形图进行分组

如何在rCharts中使用Highcharts主题

如何在rCharts中使用Highcharts主题

如何在角度中使用 Highcharts 甘特图？

如何在 Highcharts 中修改负轴条形图？

当值为0时，向带有堆积条形图的Highcharts条形图添加圆角

使用highcharts为条形图中的每个条形设置单独的颜色

使用rCharts包创建气泡图（Highcharts）

使用Highcharts动态绘制点图

通过CSV使用highcharts创建热图

使用json数据创建动态Highcharts图