HighChart凡例(Legend)

図例は、グラフに異なる形状、色、文字などで異なるデータ列を表示し、表示をクリックすることでそのデータ列を表示または非表示にすることができる.legend.enabled = true | falseを設定することによって、凡例を開いたり閉じたりします.
一、凡例様式
1、凡例容器様式
凡例コンテナとは、背景、枠線、マージン、幅などを含む凡例コンテナ全体のスタイルを指し、詳細なプロパティと説明は下表を参照してください.
パラメータ名
説明する
デフォルト
backgroundColor
背景色
null
borderColor
枠線の色
'#909090'
margin
がいぶきょり
15
padding
内側余白
8
maxHeight
最大高さ
null
navigation
ナビゲーション、最大高さを設定すると、凡例が完全に表示されない場合は、APIドキュメントを参照して、ナビゲーション形式で表示されます(ページング).
 
shadow
図例シャドウ効果、付与値はbooleanまたはObjectであり、詳細はAPIドキュメントを参照
false
width
凡例の幅
null
verticalAlign
垂直位置合わせには、'op','middle'および'bottom'のオプションがあります.
'bottom'
useHTML
HTML形式でレンダリングするかどうか(デフォルトはSVGレンダリング)、HTMLモードでレンダリングするかどうかは、サンプルナビゲーションが無効です
false
2、凡例項目スタイル
図例容器のスタイルは図例全体のスタイルを制御することができ、対応する配置図例の内容は図例項目の関連属性によって制御される.下表を参照する.
パラメータ名
説明する
デフォルト
itemDistance
凡例アイテム間隔
20
itemStyle
凡例スタイルtemStyle: { cursor: 'pointer', color: '#3E576F' }
itemHiddenStyle
凡例非表示のスタイルitemHiddenStyle: { color: '#CCC' }
itemHoverStyle
凡例マウスがストロークされたときのスタイルitemHoverStyle: { color: '#000' }
itemMarginBottom
凡例アイテムの下端
0
itemMarginTop
凡例アイテムの上部余白
0
itemWidth
凡例アイテム幅
null
symbolHeight
凡例項目表示高さ
12
symbolPadding
凡例項目は内側余白を示す
5
symbolRadius
凡例アイテムはフィレットを示します
2
symbolWidth
凡例項目表示幅
16
二、図例の内容と位置決め
1、凡例の内容
パラメータ名
説明する
デフォルト
labelFormat
凡例文字フォーマット文字列{name}
labelFormatter
凡例コンテンツフォーマット関数function() { return this.name}
reversed
順序を逆にするかどうか
false
rtl
文字が記号の前に表示されるかどうかは、主に読書習慣が右から左のユーザーを対象としています.
false
title
凡例タイトルtitle: { text: null, style: { fontWeight: "blod"}}
フォーマット関数およびフォーマット文字列については、以下のように簡単に説明します.

labelFormatter: function() {
   /*
    *            ：this，     console.log(this)           
    *  this          ，         return this.name 
    */
    return  this.name + '(Click to hide or show)';  

}

在线试一试

labelFormat 格式化字符是格式化函数的一种简写方式，即用包含变量的字符串代替函数。

对于上面格式话函数的代码，完全可以用更简洁的方式实现：

labelFormat: '{name} (Click to hide or show)'; 

オンラインで試してみる
2、位置決め
次に、図例の位置の決定のいくつかの構成を示します.
パラメータ名
説明する
デフォルト
align
グラフ内の凡例の配置方法は、「left」、「center」、「right」オプションです.
“center”
floating
凡例が浮動するかどうか、浮動を設定した後に、凡例は位置を占めません
false
layout
図例のコンテンツレイアウト方式は、水平レイアウトと垂直レイアウトがオプションで、対応する構成値は「horizontal」、「vertical」です.
"horizontal"
x
水平オフセット
0
y
垂直オフセット
0
三、凡例事件
凡例のデフォルトのクリック動作は、現在のデータ列を表示または非表示にします.

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            /*
             *                ，e     ， this       
             */
        }
    }
  }
} 

凡例クリック非表示効果を無効にする

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            return false; //    return false           
        }
    }
  }
} 

オンラインで試してみる
上記のコードは円グラフに対して無効であり、APIは以下のように説明する.
Not applicable to pies, as the legend item is per point. See point.events.
すなわち、円グラフに対応するlegendItemClickイベントはpointである.legengItemClick .

plotOptions: {
  pie: {
    point: {
        events: {
            legendItemClick: function(e) {
                return false; //    return false           
            }
        }
    }
  }
}

オンラインで試してみる
凡例を変更してデフォルト応答をクリックします(デフォルトは、ある凡例をクリックして現在のデータ列を表示または非表示にします.ここで、ある凡例をクリックして現在のデータ列のみを表示し、他のデータ列を非表示にするように変更します).

plotOptions: {
    series: {
        events: {
            legendItemClick: function(e) {
                var index = this.index;

                var series = this.chart.series;

                if (!series[index].visible) {

                    for (var i = 0; i < series.length; i++) {

                        var s = series[i];

                        i === index ? s.show() : s.hide();
                    }
                }

                return false;
            }
        }
    }
} 

オンラインで試してみる
四、図例に関するよくある問題
図例に関するよくある質問を以下に挙げます.
1、あるデータ列の凡例を表示しない方法
1)showInLegendの設定

series: [{
    data: [],
    name: "",
    showInLegend: false //     false          
}, {
    data: [],
    name: "",
    showInLegend: true //    
}] 

2)カスタム凡例フォーマット関数

legend: {
    layout: 'vertical',
    backgroundColor: '#FFFFFF',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    labelFormatter: function() {
        /*
         *        ，            
         *                  （   console.log(this)           ）
         */
        var index = this._i;

        // return null          
        return index === 0 ? null : this.name;
    }
} 

オンラインで試してみる
2、凡例がドラッグ可能か
はい、公式プラグイン「Draggable Legend」で実現できます
3、凡例に数値を表示できるか
はい、同じく公式プラグインで実現されます.「Vlue in legend」を参照してください.
その他の凡例に関するプラグインを参照してください.http://www.hcharts.cn/p/index.php?s=legend