Highcharts: Ustaw symbol legendy na kwadrat lub prostokąt

Question

Próbuję utworzyć symbol legendy jako kwadrat lub prostokąt dla wykresu liniowego. Example

Linia jest w porządku. Nie chcę zmieniać szerokości linii. HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 

<div id="container" style="height: 400px"></div> 

Javascript:

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
     renderTo: 'container', 
     type: 'line', 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     plotOptions: { 
      series: { 
       marker: { 
        enabled: false 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      symbolHeight:100, 
      borderWidth: 0 
     }, 

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

Próbowałem dodanie symbolHeight w legendzie. Ale nie działa.

legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      symbolHeight:100, 
      borderWidth: 0 
     }, 

Jak zwiększyć wysokość symbolu linii, aby była prostokątna lub kwadratowa?

Answer 1

Możesz zrobić fałszywą serię w następujący sposób i znacznik operatora.

$(function() { 
var chart = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'container', 
    type: 'line', 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    plotOptions: { 
     series: { 
      marker: { 
       enabled: true 
      } 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 

     //borderWidth: 0 
    }, 

    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], 
     showInLegend : false, 


     marker:{enabled:false} 

    },{ 
     name : "testing", 
     data : {}, 
     marker : {symbol : 'square',radius : 12 } 
    } 
      ] 
}); 
}); 

demo robocza: DEMO

Answer 2

To jest kopia z pytaniem: How to access legendSymbols and change their shape in HighCharts

Ma podobną odpowiedź i dwóch innych:

pierwsza opcja:

Highcharts.seriesTypes.line.prototype.drawLegendSymbol = 
Highcharts.seriesTypes.area.prototype.drawLegendSymbol; 

Druga opcja:

Możesz zmienić atrybut stroke-width na elemencie ścieżki.

Możemy udostępniać funkcje Highcharts, które będą rysowane przy każdym rysowaniu wykresu. Od redraw nie nazywa się na pierwszym rysunku zdarzenie load jest potrzebne

chart: { 
    events: { 
     load: function() { 
      $(".highcharts-legend-item path").attr('stroke-width', 10); 
     }, 
     redraw: function() { 
      $(".highcharts-legend-item path").attr('stroke-width', 10); 
     } 
    } 
}, 

Answer 3

Wszystkie odpowiedzi są prawidłowe, ale znalazłem ładny sposób technikę. Wymiana legendy prostokąt symbol z kwadratu:

legend: { 
    symbolHeight: 12, 
    symbolWidth: 12, 
    symbolRadius: 6 
} 

JsFiddle

Answer 4

Jest to możliwe do uzyskania kwadratowych symbole legendy pośrednictwem konfiguracji. Wystarczy ustawić wartość legend.symbolRadius na 0.

JSFiddle demo: https://jsfiddle.net/9bzy2qzq/

Answer 5

Od Highcharts 5 wprowadzone stylem tryb, można łatwo znaleźć elementy symboli i zmieniać ich atrybuty. Aby plac symbolem:

$(".highcharts-legend-item path").attr('stroke-width',16); 

http://jsfiddle.net/n3h2totc/23/