Question

我想制作一个饼图，我可以在三维饼图的侧面给出颜色，这是更深的蓝色。

我可以配置浅蓝色，但侧面颜色取决于馅饼的主色。

我想为主要表面和两侧分别着色。

＆＃13;

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 60
    }
  },
  plotOptions: {
    pie: {
      depth: 150,
      animation: false,
      states: {
        hover: false
      }
    }
  },
  series: [{
    data: [
      ['apple', 8]
    ]
  }],
  tooltip: {
    enabled: false
  }
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>tyre</title>
</head>
<body>

  <div id="container"  style="height: 400px"></div>

  <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-3d.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

＆＃13;

Answer 1

除非您不想要显示阴影，否则无法调整颜色和阴影。使用颜色选项可以更改切片的颜色，但阴影是该颜色的阴影。如果在颜色中使用颜色名称而不是十六进制值，颜色将粉饰所有颜色，并且不会显示阴影。

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 60
    }
  },
  colors: ['#008000' ],
  plotOptions: {
    pie: {
      depth: 150,
      animation: false,
      states: {
        hover: false
      }
    }
  },
  series: [{
    data: [
      ['apple', 8]
    ]
  }],
  tooltip: {
    enabled: false
  }
});

<!DOCTYPE html>
<html>
<head>
  <title>tyre</title>
</head>
<body>

  <div id="container"  style="height: 400px"></div>

  <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-3d.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer 2

You can still udpate colors using element.attr() option. There is point.graphic which contains all shapes for the slice.

Example below updates color on load and redraw event. You may want to use point.events.mouseOver/mouseOut to apply different color when hovering slice and restore your color.

function updateColors() {
    var chart = this, 
        graphic = chart.series[0].points[0].graphic; //get first slice

    graphic.side1.attr({ fill: "red" });
    graphic.side2.attr({ fill: "orange" });
    graphic.inn.attr({ fill: "black" });
    graphic.out.attr({ fill: "yellow" });
    graphic.top.attr({ fill: "grey" });
}
 
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie',
    events: {
      redraw: updateColors,
      load: updateColors
    },
    options3d: {
      enabled: true,
      alpha: 60
    }
  },
  plotOptions: {
    pie: {
      depth: 150,
      animation: false,
      states: {
        hover: false
      }
    }
  },
  series: [{
    data: [
      ['apple', 8]
    ]
  }],
  tooltip: {
    enabled: false
  }
});

<!DOCTYPE html>
<html>
<head>
  <title>tyre</title>
</head>
<body>

  <div id="container"  style="height: 400px"></div>

  <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-3d.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

在highcharts的3d饼图的颜色边

2 个答案: