2016-08-08 34 views
0

So entfernen Sie den Rahmen um das Tortendiagramm.Entfernen Sie den Rahmen um das Tortendiagramm in hohen Diagrammen

enter image description here

Ich habe versucht, die folgenden Optionen, aber es hat nicht funktioniert:

plotOptions.pie.borderWidth: 0
plotOptions.pie.borderColor: '# f2f2f2' es auch nicht funktioniert . Hier

ist der vollständige Code:

$('#PreQualifiedChart').highcharts({ 
    chart: { 
     plotBackgroundColor: '#f2f2f2', 
       plotBorderWidth: 0, 
         plotShadow: false, 
         height: 300, 
        widht: 250, 
       }, 
    credits: { 
      enabled: false 
    }, 
    exporting: { 
     buttons: { 
      contextButton: { 
       enabled: false 
      } 

     } 
    }, 
    title: null, 
    tooltip: { 
       headerFormat: '', 
        pointFormat : '{point.name}: <b>{point.y} ({point.percentage:.1f}%)</b>' 
      }, 
    plotOptions: { 
       pie: { 
       dataLabels: { 
      enabled: true, 
         distance: -50, 
         style: { 
          fontWeight: 'bold', 
           color: '#f2f2f2', 
           textShadow: '0px 1px 2px black' 
           } 
           }, 
       center: ['50%', '50%'], 
       borderWidth: 0, 
       borderColor: '#f2f2f2' 
        } 
           }, 
     series: [{ 
            dataLabels: { 
           enabled: false, 
      }, 
          type: 'pie', 
          name: '', 
           innerSize: '50%', 
         data: [ 
        { 
      name: 'Submitted All Docs', 
      y: SAD, 
      color: '#4B99D2', 
        labels: { 
       enabled: false 
       }, 
       }, 
       { 
        name: 'Submitted Missing Docs', 
        y: SMD, 
         color: '#e5a34a', 
          labels: { 
         enabled: false 
       }, 
       }, 
       { 
        name: 'Not Submitted', 
        y: NS, 
        color: '#844b03', 
        labels: { 
        enabled: false 
       }, 
       } 
      ] 
      }] 
         }); 
+3

Ich bin nicht sicher, ob ich Sie richtig verstehe, aber ich denke, dass eine Idee ist, Um marginTop, marginBottom etc. in Ihrem Fall zu verwenden: http://jsfiddle.net/pe4csrr7/3/ und ein anderes ist es, backgroundColor anstelle von plotBackgroundColor zu setzen: http://jsfiddle.net/pe4csrr7/4/ –

+0

Sie haben erstellt die "Grenze" durch Ihre Hintergrundfarbe eingerichtet. Der Diagramm- und der Plotbereich haben beide eine Hintergrundfarbe, wobei der Hintergrund des Diagramms standardmäßig weiß ist. Referenz: http://api.highcharts.com/highcharts#chart.backgroundColor | http://api.highcharts.com/highcharts#chart.plotBackgroundColor – jlbriggs

+0

@ GrzegorzBlachliński Danke, das hat funktioniert. Wenn Sie bitte das gleiche unter Antwort setzen, möchte ich es als die richtige Antwort markieren. –

Antwort

1

Ich denke, dass Sie MarginTop verwenden können, Margin usw. in Ihrem Fall. Hier können Sie Informationen zu diesen Parametern in Highcharts API finden:

http://api.highcharts.com/highcharts#chart.marginTop http://api.highcharts.com/highcharts#chart.marginBottom http://api.highcharts.com/highcharts#chart.marginLeft http://api.highcharts.com/highcharts#chart.marginRight

Hier können Sie ein Beispiel finden, wie Ihr Diagramm mit diesem Ansatz arbeiten kann:

chart: { 
     marginTop: 0, 
     marginBottom: 0, 
     marginLeft: 0, 
     marginRight: 0, 
     plotBackgroundColor: '#f2f2f2', 
     plotBorderWidth: 0, 
     plotShadow: false, 
     height: 200, 
     widht: 150, 
    }, 

http://jsfiddle.net/pe4csrr7/3/

Eine andere Idee ist, Hintergrund zu verwenden Farbe statt plotbackgroundColor, hier kann man sehen, ein Beispiel, wie es funktionieren kann:

chart: { 
    backgroundColor:'#f2f2f2', 
    plotBorderWidth: 0, 
    plotShadow: false, 
    height: 200, 
    widht: 150, 
}, 

http://jsfiddle.net/pe4csrr7/4/

Grüße,