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

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

Я могу настроить светло-голубой цвет, но цвет стороны принимается на основе основного цвета пирога.

Я хочу индивидуально окрасить как основную поверхность, так и стороны. не

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 
 
    } 
 
});

<!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>

источник

2015-06-25 wrick17

Вы все еще можете udpate цвета, используя element.attr() вариант. Существует point.graphic, который содержит все фигуры для фрагмента.

Пример ниже обновляет цвет при загрузке и событии перерисовки. Вы можете использовать point.events.mouseOver/mouseOut для применения другого цвета при зависании среза и восстановлении цвета.

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>

источник

2015-06-26 09:37:00

, но цвет сбрасывается при зависании. Есть идеи? – wrick17

Да, прочитайте мой ответ еще раз, о 'point.event.mouseOver';) Примените цвета снова в этих событиях. –

Нет, вы не можете регулировать как цвет и тень, если вы не хотите, чтобы тени, чтобы показать на всех. С помощью параметра colors вы можете изменить цвет срезов, но тень - это оттенок этого цвета. Если в цветах вы используете имена цветов вместо шестнадцатеричных значений, цвет будет белить все, и тень не будет отображаться.

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>

источник

2015-06-25 14:13:20 depperm

да, я обнаружил, что я могу изменить цвет, но мне было интересно, если я мог бы изменить тень от пирога. спасибо за вашу помощь, хотя :) – wrick17

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

ответ

Смежные вопросы