как изменить цвет моей круговой диаграммы в соответствии со значением

Question

Я хочу показать красный цвет, когда View Bag = Неактивно, я использую высокие графики, чтобы показать круговую диаграмму.когда статус активен, он должен быть по умолчанию или синим, когда его статус неактивен, он должен быть красного цвета

код

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Transformers status'
  },
  tooltip: {
    pointFormat: '{series.name} <b>{}</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name} @ViewBag.status</b> {}',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      }
    }
  },
  series: [{
    name: '@ViewBag.status',
    colorByPoint: true,
    data: [{
      name: 'FP N-67.7',
      y: 1,
      sliced: true,
      selected: true
    }]
  }]
});

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

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

Answer 1

Согласно моему пониманию вашего вопроса, может быть два подхода:

1. , если флаг активно-неактивный статический (т.е. после загрузки экрана он не изменится)

Вы можете установить атрибут загрузки цвета документа:

Highcharts.setOptions({
      colors: ['#ff0000']
});

если флаг может измениться на какое-то событие после загрузки: в этом случае вы можете использовать переменную диаграммы для изменения цвета графика.

chart.series [0] .data [0] .graphic.attr ({fill: '# ff0000'});

Я пытался охватить обаслучаи использования в примере ниже.Надеюсь, это поможет

$(function() {
  if ($("input[name='status']:checked").val() == 'inactive') {
    Highcharts.setOptions({
      colors: ['#ff0000']
    });
  }
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer'
        }
      },
      series: [{
        type: 'pie',
        name: 'Browser share',
        data: [
          ['Chrome', 75]
        ]
      }]
    });
  });
  $("input[type='radio']").click(function() {
    var radioValue = $("input[name='status']:checked").val();
    if (radioValue == 'inactive') {
      chart.series[0].data[0].graphic.attr({
        fill: '#ff0000'
      });
    } else {
      chart.series[0].data[0].graphic.attr({
        fill: '#2f7ed8'
      });
    }
  });
});

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

<label><input type="radio" name="status" value="active">Active</label>
<label><input type="radio" name="status" value="inactive" checked>In-Active</label>

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