高图定制传奇

时间:2017-09-19 15:17:24

标签: javascript highcharts highcharts-ng

我想定制高图的传说,实现:

  1. 会有点而不是线
  2. 点的颜色和图例文本的颜色将等于this.color
  3. 关于隐形状态(onclick图例)我想将颜色更改为高图(灰色)的默认选项
  4. 这是我到目前为止所做的: enter image description here

    我做了什么:

    legend: {
        useHTML: true,
        symbolWidth: 0,
        lableFormat: '<div>' +
                        '<div style="border-radius:50%; width: 10px; height:10px: background-color:{color}; display: inline-block; margin-right:5px"> </div>' +
                        "<span style='color:{color};font-family:proximaNovaBold'> {name} </span>"
                     '<div>',
    }
    

    我缺少的东西: - 点击后,图例不会将其颜色更改为默认灰色

    我正在为寻找无形状态的legend-labelFormat之类的东西,但我没有在高图的文档中找到它(顺便说一句真的很好),有没有其他方法可以实现这个目标?

1 个答案:

答案 0 :(得分:0)

我找到了答案,但这并不像我希望的那样容易:

我使用了事件监听器plotOptions.series.events.legendItemClick, chart.legend.update和legend.labelFormatter,带有外部变量

外部变量:

var legendsStatus = {};

使用labelFormatter的自定义图例:

legend :{
                        useHTML: true,
                        symbolWidth: 0,
                        labelFormatter: function () {
                                     return '<div>' +
                                                '<div style="border-radius: 50%; width: 10px; height: 10px; background-color: ' + this.color +'; display: inline-block; margin-right:5px"> </div>' +
                                                "<span style='color:" + this.color + "; font-family:proximaNovaBold'> " + this.name +  " </span>" +
                                            '</div>'
                                 }

                    },

使用chart.legend.update:

的事件监听器
plotOptions: {
    series: {
        marker: {
            enabled: false
        },
        events : {
            legendItemClick : function(){

                legendsStatus[this.name] = this.visible;

                this.chart.legend.update( {
                    useHTML: true,
                    symbolWidth: 0,
                    labelFormatter: function () {

                                // legend status = visible
                                if (!legendsStatus[this.name])
                                     return '<div>' +
                                                '<div style="border-radius: 50%; width: 10px; height: 10px; background-color: ' + this.color +'; display: inline-block; margin-right:5px"> </div>' +
                                                "<span style='color:" + this.color + "; font-family:proximaNovaBold'> " + this.name +  " </span>" +
                                           '</div>'

                                // legend status = invisible
                                return '<div>' +
                                           '<div style="border-radius: 50%; width: 10px; height: 10px; background-color: #cccccc; display: inline-block; margin-right:5px"> </div>' +
                                           "<span style='color: #cccccc; font-family:proximaNovaBold'> " + this.name +  " </span>" +
                                      '</div>'
                             }
                });


            }
        }
    }
},