Question

我在Highcharts的传说上有自定义样式，效果很好。当我点击该项目时，我想应用其他样式来给出禁用按钮展示。为了实现这一点，我使用了计数器，即当计数器是偶数时，应该应用活动样式，并且应该在奇数计数器上使用非活动样式。这不能正常工作，我想这个问题与范围有关。请找到以下代码：

＆＃13;

var clickCounter = 0;
Highcharts.chart('container', {

    plotOptions: {

        series: {
            events: {
                legendItemClick: function () {
                    clickCounter++;
                    return clickCounter;
                }
            },
            showInLegend: true
        }
    },

    legend: {
        useHTML: true,
        labelFormatter: function (clickCounter) {
        		if(clickCounter%2 == 0)
            return '<span class="span-legend-active">' + this.name + '</span>'
            else
            return '<span class="span-legend-item-inactive">' + this.name + '</span>'
        }
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [11.9, 31.5, 78.4, 29.2, 44.0, 76.0, 95.6, 48.5, 116.4, 114.1, 35.6, 154.4]
    }]
});

＆＃13;

.span-legend-active {
    background-color: white;
    border: 1px solid green;
    /* border: none; */
    color: black;
    padding: 3px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    
}

.span-legend-item-inactive {
    background-color: white;
    border: 1px solid #cccccc;
    color: #cccccc;
    padding: 3px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
  
}

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

＆＃13;

感谢任何帮助

Answer 1

我认为你不需要使用legendItemClick事件来做到这一点。您可以尝试使用以下命令更改CSS选择器：

.highcharts-legend-item > span > span {
    (active style)
}
.highcharts-legend-item-hidden > span > span {
    (inactive style)
}

您修改后的代码here。

Answer 2

修改

我已经制作了jsfiddle来切换你的图例项目的CSS。

您可以点击此处将类设置为您的图例，

events: { legendItemClick: function(event) { //console.log(event); if(this.visible) event.target.legendItem.element.firstChild.className = 'span-legend-item-inactive'; else event.target.legendItem.element.firstChild.className = 'span-legend-active'; } }

这里，this.visible是Hightcharts给出的布尔变量，表示图例是否可见。查看来自highcharts网站的jsfiddle参考文献。

如果在onclick期间可见，您可以指定.span-legend-item-inactive课程以禁用它。同样，如果在onclick期间无法显示，则可以指定.span-legend-active以使其显示为已启用。如果要分配多个类或使用event.target.legendItem.element.firstChild.classList
，则可以为空格分隔的类名
此外，Highcharts将event对象传递给这些事件函数。您可以控制它并检查方法或变量，您可以将它们用于您的目的。

此外，this.color会给出当前系列线的颜色。因此，您可以使用此选项在labelFormatter中设置图例颜色或边框颜色，如下所示

return `<span class="span-legend-active" style="border-color:${this.color}">${this.name}</span>`

链接到jsfiddle。

旧回答：

labelFormatter()没有为函数提供任何参数，因此clickCounter未定义。

所以不要将clickCounter赋予labelFormatter函数，它将从全局范围开始。

legend: { useHTML: true, labelFormatter: function () {} }

Highcharts传说中的自定义样式

2 个答案: