在Highcharts中，如何在solidgauge中創建輝光/陰影效果？

我試圖在量表內實現某種發光效果，但只能在外面實現。我還試圖在量表內的圓/背景上添加發光效果，但它隱藏在綠色/橙色區域下方。在Highcharts中，如何在solidgauge中創建輝光/陰影效果？

任何幫助，非常感謝。

Highcharts.chart('container', { 
 

 
    chart: { 
 
    type: 'solidgauge', 
 
    marginTop: 0 
 
    }, 
 

 
    title: { 
 
    text: false, 
 
    style: { 
 
     fontSize: '24px' 
 
    } 
 
    }, 
 

 
    tooltip: { 
 
    borderWidth: 0, 
 
    backgroundColor: 'none', 
 
    shadow: false, 
 
    style: { 
 
     fontSize: '16px' 
 
    }, 
 
    pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>', 
 
    positioner: function(labelWidth) { 
 
     return { 
 
     x: 200 - labelWidth/2, 
 
     y: 180 
 
     }; 
 
    } 
 
    }, 
 

 
    pane: { 
 
    startAngle: 0, 
 
    endAngle: 360, 
 
    background: [{ 
 
     outerRadius: '88%', 
 
     innerRadius: '70%', 
 
     backgroundColor: 'white', 
 
     borderWidth: 0 
 
    }] 
 
    }, 
 

 
    plotOptions: { 
 
    solidgauge: { 
 
     animation: false, 
 
     dataLabels: { 
 
     enabled: false 
 
     }, 
 
     linecap: 'round', 
 
     stickyTracking: false, 
 
     rounded: true 
 
    } 
 
    }, 
 

 
    yAxis: { 
 
    min: 0, 
 
    max: 100, 
 
    lineWidth: 0, 
 
    tickPositions: [] 
 
    }, 
 

 
    series: [{ 
 
    name: 'Something', 
 
    data: [{ 
 
     color: '#e76a0b', 
 
     radius: '112%', 
 
     innerRadius: '88%', 
 
     y: 100, 
 
     borderColor: '#e76a0b' 
 
    }, { 
 
     color: '#007272', 
 
     radius: '112%', 
 
     innerRadius: '88%', 
 
     y: 40, 
 
     borderColor: '#007272' 
 
    }] 
 
    }] 
 
});

.highcharts-series-group { 
 
    filter: url(#glow) 
 
}

<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> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
 

 
<div id="container" style="width: 400px; height: 400px; margin: 0 auto"> 
 
</div> 
 
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 300 300"> 
 
    <defs> 
 
    <filter id="glow" x="-5000%" y="-5000%" width="10000%" height="10000%"> 
 
     <feFlood result="flood" flood-color="#000" flood-opacity=".2"></feFlood> 
 
     <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite> 
 
     <feMorphology in="mask" result="dilated" operator="dilate" radius="3"></feMorphology> 
 
     <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur> 
 
     <feMerge> 
 
     <feMergeNode in="blurred"></feMergeNode> 
 
     <feMergeNode in="SourceGraphic"></feMergeNode> 
 
     </feMerge> 
 
    </filter> 
 
    </defs> 
 
</svg>

演示：http://jsfiddle.net/remisture/f2srey6g/4/

來源

2017-06-20 Remi Sture

它看起來是不是漸變，你應該能夠使用活動計圖表：http://jsfiddle.net/f2srey6g/ –

您可以通過使用達到類似的效果陰影圖像疊加與Renderer.image – stpoa

@GrzegorzBlachliński，是的，實現圓角與你的例子很好。不過，你的例子很難包圍我的頭。我不清楚你的第二個系列是做什麼的。這甚至需要嗎？ http://jsfiddle.net/remisture/f2srey6g/3/ –

基於@GrzegorzBlachliński`s答案的完整解決方案。

爲了創建可縮放的陰影，您可以根據重繪和加載事件中的圖表大小計算其大小。

const chart = Highcharts.chart('container', { 
    chart: { 
    type: 'solidgauge', 
    marginTop: 50, 
    events: { 
     load() { 
     const chart = this 
     const el = document.querySelector('.highcharts-tracker > path.highcharts-point') 
     const {x, y, width, height } = el.getBBox() 

     chart.shadow = chart 
     .renderer.image('http://i.imgur.com/frVkXOh.png', x+10, y+50, width, height) 
     .attr({ zIndex: 10 }) 
     .add() 
     }, 
     redraw() { 
     const chart = this 
     const el = document.querySelector('.highcharts-tracker > path.highcharts-point') 
       const {x, y, width, height } = el.getBBox() 

     chart.shadow.attr({ x: x+10, y: y + 50, width, height }) 
     } 
    } 
    }, 

    title: { 
    text: 'Activity', 
    style: { 
     fontSize: '24px' 
    } 
    }, 

    tooltip: { 
    borderWidth: 0, 
    backgroundColor: 'none', 
    shadow: false, 
    style: { 
     fontSize: '16px' 
    }, 
    pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>', 
    positioner: function(labelWidth) { 
     return { 
     x: 200 - labelWidth/2, 
     y: 180 
     }; 
    } 
    }, 

    pane: { 
    startAngle: 0, 
    endAngle: 360, 
    background: [] 
    }, 

    plotOptions: { 
    solidgauge: { 
     animation: false, 
     dataLabels: { 
     enabled: false 
     }, 
     linecap: 'round', 
     stickyTracking: false, 
     rounded: true 
    } 
    }, 

    yAxis: { 
    min: 0, 
    max: 100, 
    lineWidth: 0, 
    tickPositions: [] 
    }, 

    series: [{ 
    name: 'Something', 
    data: [{ 
     color: '#e76a0b', 
     radius: '112%', 
     innerRadius: '88%', 
     y: 100, 
     borderColor: '#e76a0b' 
    }, { 
     color: '#007272', 
     radius: '112%', 
     innerRadius: '88%', 
     y: 40, 
     borderColor: '#007272' 
    }] 
    }] 
})

活生生的例子： http://jsfiddle.net/kumrruhq/

來源

2017-06-21 13:08:17 stpoa

在Highcharts中，如何在solidgauge中創建輝光/陰影效果？

回答

相關問題