2017-06-05 4 views
1

Wie legen Sie einen Klassennamen für eine exportierte Grafik in Highcharts fest? Ich habe versucht, diese aber es hat nicht funktioniert:Highcharts className exportieren

exporting: { 
    chartOptions: { 
    chart: { 
     className: 'negPos' 
    } 
    } 
} 
+0

was ist Ihr Ziel class.adding Klasse bei der Ausfuhr der Zugabe nicht funktioniert http: //jsfiddle.net/deep3015/1s0h3wng/ –

+0

Ich verwende den Stilmodus und möchte die Farben der Spalte in meinem CSS überschreiben. – ellier7

+0

http://jsfiddle.net/deep3015/1s0h3wng/1/ überprüfen Sie dies –

Antwort

0

negativeColor Add Optionen plotten

Highcharts.chart(container, { 
 
    chart: { 
 
    //className: 'negPos', 
 
    type: 'column', 
 
    spacingBottom: 20, 
 
    style: { 
 
     fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif', 
 
     fontSize: '11px', 
 
     fontWeight: 'lighter' 
 
    } 
 
    }, 
 
    title: { 
 
    text: 'Highcharts', 
 
    align: 'center', 
 
    style: { 
 
     fontSize: '15px', 
 
     fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif', 
 
     fontWeight: 'lighter' 
 
    } 
 
    }, 
 
    xAxis: { 
 
    categories: [1, 2, 3, 5, 6] 
 
    }, 
 
    yAxis: { 
 
    title: { 
 
     text: '%' 
 
    } 
 
    }, 
 
    tooltip: { 
 
    borderWidth: 0, 
 
    style: { 
 
     fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif', 
 
     fontSize: '11px', 
 
     align: 'center' 
 
    }, 
 
    formatter: function() { 
 
     return '<b>' + this.x + ': </b><br>' + Highcharts.numberFormat(this.y, 1) + '%' 
 
    } 
 
    }, 
 
    plotOptions: { 
 
    column: { 
 
     negativeColor: '#d9534f', 
 
     threshold: 0, 
 
    } 
 
    }, 
 
    /* plotOptions: { 
 
     bar: { 
 
      dataLabels: { 
 
       enabled: false 
 
      } 
 
     } 
 
    },*/ 
 
    legend: { 
 
    layout: 'vertical', 
 
    verticalAlign: 'bottom', 
 
    borderWidth: 1, 
 
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
 
    shadow: true 
 
    }, 
 
    series: [{ 
 
    showInLegend: false, 
 
    color: '#5cb85c', 
 
    data: [54, 21, -3, 18, 5, -11] 
 
    }] 
 
});
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container"></div>

Verwandte Themen