Split-Display-Legende in Highcharts

Question

Ich habe Kombinationstabelle mit Highcharts, gibt es Spline, Kuchen und gestapelt. Ist es möglich, Legenden zu teilen oder vertikales und horizontales Layout zusammen zu verwenden?

aktuelle Layout Legende ist horizontal

* Serie 1 * Serie 2 * Serie 3 * Serie 4 * Serie 5 * Serie 6 * Serie 7 * Serie 8

I die Legende angezeigt werden soll sein

* Serie 1 Serie 2 *
* 3 * Serie Serie 4 Serie 5 *
* Serie 6 * 7 * Serie Serie 8

ist es möglich?

danke

Answer 1

Es kann nicht nur durch die Verwendung Highcharts Konstruktor Optionen.

(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 Optionen:

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 
    }, 
    (...) 
    ] 
}); 

Live-Demo: Sie können durch Einwickeln einige Kernfunktionen diese Art von Aussehen und Verhalten erreichenhttp://jsfiddle.net/kkulig/r70fwasr/

Dieser Code kann sein optimiert, so dass es für mehr als 2 Legenden funktioniert.

Answer 2

Sie können die itemWidth-Eigenschaft der Legende verwenden. Hier ist der Link

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/