Как получить интервал между границей и внутренним фоном цвета круговой диаграммы с использованием высоких диаграмм?


0 принят

Вы можете добавить еще одну серию, которая создаст границу.

Demo: http://jsfiddle.net/rxp0noj5/

var percentage_c = 75;

$('#container').highcharts({
  chart: {
    spacingBottom: -8,
    spacingTop: -8,
    spacingLeft: -8,
    spacingRight: -8,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: true,
    type: 'pie',
    width: null,
    height: null,
    backgroundColor: 'rgba(255, 255, 255, 0)',
  },
  title: {
    text: percentage_c + '%',
    align: 'center',
    verticalAlign: 'middle',
    style: {
      color: '#FFF',
      fontSize: '18px',
      fontFamily: 'arial'
    },
    y: 3,
    x: 20
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        useHTML: true,
        formatter: function() {},
      },
      states: {
        hover: {
          enabled: false,
          brightness: 0
        }
      }
    },
    pie: {
      borderWidth: 2,
      borderColor: "none"
    }
  },
  series: [{ // series for border
  	innerSize: '100%',
  	data: [1],
    borderColor: 'red'
  },{
    size: '95%', // decresed size for padding between pie and border
    name: " ",
    colorByPoint: true,
    data: [{
      name: "Unrestricted",
      y: percentage_c,
      color: '#6821A5',
      tooltip: false
    }, {
      name: "Restricted",
      y: 100 - percentage_c,
      color: 'none',
      dataLabels: {
        enabled: false
      }
    }]
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>


0
ok, now I understood your problem, we cant give the gap for the place which you
 asked, bt we can give the same color for the border and give shadow for the 
graph...this will help you.. try this

Нажмите здесь, например

JavaScript, JQuery, HTML, CSS, Highcharts,

javascript,jquery,html,css,highcharts,

-3

Ответов: 2


0 принят

Вы можете добавить еще одну серию, которая создаст границу.

Demo: http://jsfiddle.net/rxp0noj5/

var percentage_c = 75;

$('#container').highcharts({
  chart: {
    spacingBottom: -8,
    spacingTop: -8,
    spacingLeft: -8,
    spacingRight: -8,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: true,
    type: 'pie',
    width: null,
    height: null,
    backgroundColor: 'rgba(255, 255, 255, 0)',
  },
  title: {
    text: percentage_c + '%',
    align: 'center',
    verticalAlign: 'middle',
    style: {
      color: '#FFF',
      fontSize: '18px',
      fontFamily: 'arial'
    },
    y: 3,
    x: 20
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        useHTML: true,
        formatter: function() {},
      },
      states: {
        hover: {
          enabled: false,
          brightness: 0
        }
      }
    },
    pie: {
      borderWidth: 2,
      borderColor: "none"
    }
  },
  series: [{ // series for border
  	innerSize: '100%',
  	data: [1],
    borderColor: 'red'
  },{
    size: '95%', // decresed size for padding between pie and border
    name: " ",
    colorByPoint: true,
    data: [{
      name: "Unrestricted",
      y: percentage_c,
      color: '#6821A5',
      tooltip: false
    }, {
      name: "Restricted",
      y: 100 - percentage_c,
      color: 'none',
      dataLabels: {
        enabled: false
      }
    }]
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>


0
ok, now I understood your problem, we cant give the gap for the place which you
 asked, bt we can give the same color for the border and give shadow for the 
graph...this will help you.. try this

Нажмите здесь, например

JavaScript, JQuery, HTML, CSS, Highcharts,
Похожие вопросы