Highcharts экспортирует className

Как задать имя класса для экспортируемого графика в Highcharts? Я пробовал это, но это не сработало:

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

export highcharts classname
person ellier7    schedule 05.06.2017    source источник
comment
какова ваша цель добавления класса class.adding при экспорте не работает jsfiddle.net/deep3015/1s0h3wng   -  person Deep 3015    schedule 06.06.2017
comment
Я использую стилизованный режим и хотел бы переопределить цвета столбца в моем CSS.   -  person ellier7    schedule 06.06.2017
comment
jsfiddle.net/deep3015/1s0h3wng/1 проверьте это   -  person Deep 3015    schedule 06.06.2017
comment
Мне удалось применить один цвет, но мне нужно, чтобы положительные значения были зелеными, а отрицательные — красным. Ранее я использовал имя класса для применения этого правила.   -  person ellier7    schedule 06.06.2017
comment
можете ли вы добавить скриншот вашего требования   -  person Deep 3015    schedule 06.06.2017
comment
Вам необходимо отправить эти ресурсы csv на экспортирующий сервер — см. ответ и пример из этой темы stackoverflow.com/questions/42340707/   -  person morganfree    schedule 06.06.2017
comment
это мой график. при экспорте отображаются синие полосы jsfiddle.net/er1187/tfs0qv0a @Deep3015   -  person ellier7    schedule 06.06.2017
comment
@ellier7 это приемлемо jsfiddle.net/deep3015/n7L6q4v4/1   -  person Deep 3015    schedule 06.06.2017
comment
это делает трюк, большое спасибо! @ Deep3015, вы можете повысить свой комментарий до ответа, если хотите   -  person ellier7    schedule 06.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

negativeColor добавить к параметрам графика

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>

person Deep 3015    schedule 06.06.2017