Как сделать прямоугольную легенду в высоких диаграммах?

Не могли бы вы рассказать мне, как сделать прямоугольную легенду в высоких диаграммах?Как сделать прямоугольную легенду в высоких диаграммах?

В настоящее время в моей легенде демки находится circular или circle. Вот мой код http://jsfiddle.net/oupmgvjy/12/

Я хочу сделать так, как показано на картинке:

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'pie' 
     }, 

     credits: { 
      enabled: false 
     }, 
     exporting: { enabled: false }, 
     legend: { 
      align: 'right', 
      verticalAlign: 'top', 
      layout: 'vertical', 
      x: 0, 
      y: 100, 
       labelFormatter: function() { 

        return '<span style="color:' + this.color + ';background:red!important">' + this.name + ':</span> <b>' + this.y + '</b> </n>'; 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Total percent market share' 
      } 
     }, 
     plotOptions: { 
      pie: { 
       series: { 
        states: { 
         hover: { 
          enabled: false 
         } 
        } 
      }, 
       allowPointSelect: false, 
       cursor: 'pointer', 
       showInLegend: true, 
       dataLabels: { 
        format: '<b>{point.y}</b>', 

        style: { 
         fontWeight: 'bold', 
         color: 'white' 
        } 
       }, 

       startAngle: 0, 
       endAngle: 270, 
       center: ['50%', '75%'] 
      } 
     }, 
     tooltip: { 
      enabled: false, 
      shadow: false 
     }, 
     series: [{ 
     states: {hover: {enabled: false}}, 
      showInLegend: false, 
      name: 'election result', 
      enabled: true, 
       dataLabels: { 
        enabled: true 
       }, 
      data: [ 
       ['A', 55], 
       ['B', 65], 

      ], 
      size: '30%', 
      innerSize: '70%', 
     }, { 
     states: {hover: {enabled: false}}, 
      name: 'Versions', 
      data: [ 
       ['sdsd', 55], 
       ['sdf', 65], 
       ['sdf', 65], 
       ['sdf', 132], 

      ], 
      size: '70%', 
      innerSize: '80%', 
     }] 
    }); 
});

источник

2017-01-11 user944513

Попробуйте с useHTML и labelFormatter

 legend: { 

     symbolHeight: 1, 
     symbolWidth: 1, 
     symbolRadius: 0, 
     useHTML:true, 
     align: 'right', 
     verticalAlign: 'top', 
     itemWidth:100, 
     layout: 'vertical', 
     x: 0, 
     y: 100, 
     labelFormatter: function() { 

       return '<div style="padding:10px;width:55px;background-color:'+this.color+'"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>'; 
     } 
    }

скрипку: http://jsfiddle.net/qhq2ctqr/

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'pie' 
 
     }, 
 

 
     credits: { 
 
     enabled: false 
 
     }, 
 
     exporting: { enabled: false }, 
 
     legend: { 
 
      
 
      symbolHeight: 1, 
 
      symbolWidth: 1, 
 
      symbolRadius: 0, 
 
      useHTML:true, 
 
      align: 'right', 
 
      verticalAlign: 'top', 
 
      itemWidth:100, 
 
      layout: 'vertical', 
 
      x: 0, 
 
      y: 100, 
 
      labelFormatter: function() { 
 
       
 
        return '<div style="padding:10px;width:55px;background-color:'+this.color+'"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>'; 
 
      } 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Total percent market share' 
 
      } 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       series: { 
 
        states: { 
 
         hover: { 
 
          enabled: false 
 
         } 
 
        } 
 
      }, 
 
       allowPointSelect: false, 
 
       cursor: 'pointer', 
 
       showInLegend: true, 
 
       dataLabels: { 
 
        format: '<b>{point.y}</b>', 
 

 
        style: { 
 
         fontWeight: 'bold', 
 
         color: 'white' 
 
        } 
 
       }, 
 

 
       startAngle: 0, 
 
       endAngle: 270, 
 
       center: ['50%', '75%'] 
 
      } 
 
     }, 
 
     tooltip: { 
 
      enabled: false, 
 
      shadow: false 
 
     }, 
 
     series: [{ 
 
     states: {hover: {enabled: false}}, 
 
      showInLegend: false, 
 
      name: 'election result', 
 
      enabled: true, 
 
       dataLabels: { 
 
        enabled: true 
 
       }, 
 
      data: [ 
 
       ['A', 55], 
 
       ['B', 65], 
 

 
      ], 
 
      size: '30%', 
 
      innerSize: '70%', 
 
     }, { 
 
     states: {hover: {enabled: false}}, 
 
      name: 'Versions', 
 
      data: [ 
 
       ['sdsd', 55], 
 
       ['sdf', 65], 
 
       ['sdf', 65], 
 
       ['sdf', 132], 
 

 
      ], 
 
      size: '70%', 
 
      innerSize: '80%', 
 

 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0px auto"></div>

источник

2017-01-11 15:32:10 Deep

, но как сделать прямоугольник ... Мне нужно написать текст внутри прямоугольника – user944513

увидеть мой рис ..Я нужно установить текст внутри прямоугольника – user944513

@ user944513 ОКК позвольте мне проверить. – Deep

Как сделать прямоугольную легенду в высоких диаграммах?

ответ

Смежные вопросы