하이 차트의 분할 디스플레이 범례

Question

하이 차트와 조합 차트가 있습니다. 스플라인, 파이 및 스택이 있습니다. 범례를 분리하거나 수직 및 수평 레이아웃을 함께 사용할 수 있습니까?

현재 배치 범례 수평

* 시리즈 1 * 2 시리즈 * 시리즈 3 * 시리즈 4 * 시리즈 5 * 시리즈 6 * 시리즈 7 * 시리즈 I 범례 디스플레이

되길 8

시리즈 * 1 * 2 시리즈
시리즈 * 3 * 4 * 시리즈 시리즈 5
시리즈 * 6 * 7 * 시리즈 시리즈 8

것이 가능?

thanx

Answer 1

그것은 단지 Highcharts 생성자 옵션을 사용하여 수행 할 수 없습니다.

(function(H) { 
    var merge = H.merge; 

    H.wrap(H.Legend.prototype, 'getAllItems', function() { 
    var allItems = [], 
     chart = this.chart, 
     options = this.options, 
     legendID = options.legendID; 

    H.each(chart.series, function(series) { 
     if (series) { 
     var seriesOptions = series.options; 

     // use points or series for the legend item depending on legendType 
     if (!isNaN(legendID) && (seriesOptions.legendID === legendID)) { 
      allItems = allItems.concat(
      series.legendItems || 
      (seriesOptions.legendType === 'point' ? 
       series.data : 
       series) 
     ); 
     } 
     } 
    }); 

    return allItems; 
    }); 

    H.wrap(H.Chart.prototype, 'render', function(p) { 
    var chart = this, 
     chartOptions = chart.options; 

    chart.firstLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.firstLegend, { 
     legendID: 0 
    })); 

    chart.secondLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.secondLegend, { 
     legendID: 1 
    })); 

    p.call(this); 
    }); 

    H.wrap(H.Chart.prototype, 'redraw', function(p, r, a) { 
    var chart = this; 

    p.call(chart, r, a); 

    chart.firstLegend.render(); 
    chart.secondLegend.render(); 
    }); 

    H.wrap(H.Legend.prototype, 'positionItem', function(p, item) { 
    p.call(this, item); 
    }); 
})(Highcharts); 

Highcharts 옵션 :

Highcharts.chart('container', { 

    chart: { 
    marginRight: 350 // create some space for the legend 
    }, 

    legend: { 
    verticalAlign: 'middle', 
    width: 300, 
    align: 'right' 
    }, 
    firstLegend: { 
    y: -25 
    }, 
    secondLegend: { 
    y: 25 
    }, 

    series: [{ 
    data: [5, 6, 7], 
    legendID: 0, 
    }, { 
    data: [2, 3, 1], 
    legendID: 0, 
    }, 
    (...) 
    { 
    data: [1, 8, 2], 
    legendID: 1 
    }, { 
    data: [3, 2], 
    legendID: 1 
    }, 
    (...) 
    ] 
}); 

라이브 데모 :이 http://jsfiddle.net/kkulig/r70fwasr/

이 코드가 될 수 있습니다 당신은 몇 가지 핵심 기능 포장 에 의해 모양과 행동의 종류를 얻을 수 있습니다 최적화되어 2 개 이상의 범례에서 작동합니다.

Answer 2

범례의 itemWidth 속성을 사용할 수 있습니다. 여기에 링크가 있습니다

Highcharts.chart('container', { 
chart: { 
    width: 500 
}, 

title: { 
    text: 'Legend <em>itemWidth</em> option' 
}, 

legend: { 
    itemWidth: 100 
}, 

series: [{ 
    data: [6, 4, 2], 
    name: 'First' 
}, { 
    data: [7, 3, 2], 
    name: 'Second' 
}, { 
    data: [9, 4, 8], 
    name: 'Third' 
}, { 
    data: [1, 2, 6], 
    name: 'Fourth' 
}, { 
    data: [4, 6, 4], 
    name: 'Fifth' 
}, { 
    data: [1, 2, 7], 
    name: 'Sixth' 
}, { 
    data: [4, 2, 5], 
    name: 'Seventh' 
}, { 
    data: [8, 3, 2], 
    name: 'Eighth' 
}, { 
    data: [4, 5, 6], 
    name: 'Ninth' 
}] 

});

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/legend/itemwidth-80/