그라데이션이있는 하이 차트 원형 도넛

Question

하이 차트를 사용하는 방법이 있습니까? 그런 종류의 그라디언트를 얻으려면 어떻게해야합니까?

여기

어떤 jsfiddle boilerplate

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'chart', 
     type: 'pie' 
    }, 
    exporting: { 
     enabled: false 
    }, 
    credits: { 
     enabled: false 
    }, 
    title: { 
     text: null 
    }, 
    tooltip: { 
     enabled: false 
    }, 
    plotOptions: { 
     pie: { 
      animation: false, 
      enableMouseTracking: false, 
      borderColor: 'transparent', 
      colors: ['#fdc81c', '#eee'], 
      borderWidth: 0, 
      innerSize: '60%', 
      dataLabels: { 
       enabled: false 
      } 
     } 
    }, 
    series: [{ data: [80, 20] }] 
}) 

감사합니다!

Answer 1

하이 차트에는 방사형 그래디언트를 사용할 수 있지만 값에 따라 채우기를 얻지 못할 수도 있습니다.

highcharts는 해당 설명서 here에 방사형 및 선형 그래디언트를 하이 차트에 사용할 수 있다고 명시했습니다.

Answer 2

하이 차트에는 선형 및 방사형의 두 가지 유형 만 있으므로 하이퍼 차트를 사용하여 문제를 해결할 수는 없습니다. 그래서 어떻게해야할지 생각하기 시작했고 많은 시간을 낭비한 후 작은 차트 슬라이스을 다른 색상으로 나누어 구현하기로 결정했습니다. 그런 다음 100 개의 작은 조각으로 된 도넛 형/원형 차트가 있고 각기 다른 색이 있습니다.

Gradient color degraded from 0 to 100% Gradient color degraded from 0 to 60% 는 내가 반응 - 네이티브 응용 프로그램을 개발하고, 그래서 당신이 여기에 코드를 게시 :

gradientColors.js을

export default ['#41E500','#44E500','#47E500','#4AE500','#4DE600','#50E601','#53E601','#56E601','#59E701','#5CE702','#5FE702','#62E702','#65E802','#68E803','#6BE803','#6EE903','#71E903','#74E904','#77E904','#7AEA04','#7DEA04','#80EA05','#83EA05','#86EB05','#89EB05','#8CEB05','#8FEC06','#92EC06','#95EC06','#98EC06','#9BED07','#9EED07','#A1ED07','#A4ED07','#A7EE08','#AAEE08','#ADEE08','#B0EE08','#B3EF09','#B6EF09','#B9EF09','#BCF009','#BFF00A','#C2F00A','#C5F00A','#C8F10A','#CBF10A','#CEF10B','#D1F10B','#D4F20B','#D7F20B','#DAF20C','#DDF30C','#E0F30C','#E3F30C','#E6F30D','#E9F40D','#ECF40D','#EFF40D','#F2F40E','#F5F50E','#F8F50E','#FBF50E','#FFF60F','#FFF60F','#FFF20E','#FFEF0E','#FFEC0D','#FFE80D','#FFE50C','#FFE20C','#FFDE0C','#FFDB0B','#FFD80B','#FFD50A','#FFD10A','#FFCE0A','#FFCB09','#FFC709','#FFC408','#FFC108','#FFBE07','#FFBA07','#FFB707','#FFB406','#FFB006','#FFAD05','#FFAA05','#FFA705','#FFA705','#FF9805','#FF8906','#FF7B06','#FF6C07','#FF5D07','#FF4F08','#FF4008','#FF3109','#FF230A','#FF230A']; 

ProgressChart.js

'use strict'; 

const Highcharts = 'Highcharts'; 
import { COLORS } from '@theme'; 
import gradientColors from './gradientColors'; 

const fakeData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; 

const data = [{ 
    y: 100, 
    color: COLORS.dark_red, 
    drilldown: { 
    name: 'Categories', 
    categories: ['A', 'B', 'C', 'D', 'E', 'F'], 
    data: fakeData, 
    color: COLORS.dark_red 
    } 
}]; 
const donutData = []; 
const donutDataOuter = []; 

const dataLen = data.length; 
// Build the data arrays 
for (let i = 0; i < dataLen; i += 1) { 

    // add data 
    const drillDataLen = data[i].drilldown.data.length; 
    for (let j = 0; j < drillDataLen; j += 1) { 

    if (j > 60) { 
     donutData.push({ 
     y: data[i].drilldown.data[j], 
     color: 'white', 
     borderColor: 'white' 
     }); 
     donutDataOuter.push({ 
     y: data[i].drilldown.data[j], 
     color: 'white', 
     borderColor: 'white' 
     }); 
    } else { 
     donutData.push({ 
     y: data[i].drilldown.data[j], 
     color: gradientColors[j], 
     borderColor: gradientColors[j] 
     }); 
     donutDataOuter.push({ 
     y: data[i].drilldown.data[j], 
     color: gradientColors[j], 
     borderColor: gradientColors[j] 
     }); 
    } 
    } 
} 

const donutConf = { 
    chart: { 
    type: 'pie', 
    animation: Highcharts.svg 
    }, 
    title: { 
    text: 'Equipment types (%)', 
    align: 'center', 
    verticalAlign: 'middle', 
    floating: true, 
    style: { 
     color: COLORS.light_grey_2, 
     fontWeight: 'bold', 
     fontSize: 38 
    } 
    }, 
    plotOptions: { 
    pie: { 
     shadow: false, 
     center: ['50%', '50%'] 
    }, 
    showCheckbox: true 
    }, 
    tooltip: { 
    formatter() { 
     return '<b>' + this.series.name + '</b><br/>' + 
     Highcharts.numberFormat(this.y, 2) + ' %'; 
    } 
    }, 
    legend: { 
    enabled: true 
    }, 
    exporting: { 
    enabled: false 
    }, 
    series: [ 
    { 
     name: 'Categories', 
     data: donutData, 
     size: '93%', 
     innerSize: '58%', 
     dataLabels: { 
     enabled: false 
     }, 
     id: 'inner' 
    }, 
    { 
     name: 'Categories2', 
     data: donutDataOuter, 
     size: '100%', 
     innerSize: '97%', 
     dataLabels: { 
     enabled: false 
     }, 
     id: 'outer' 
    }], 
}; 

export default donutConf; 

나는 그것을 매우 빨리 개발했다. 위의 예제 코드는 60 % 차트입니다. 최종 버전에서는이 더러운 if-else 절을 ​​포함하지 않을 것입니다.

그런 다음이 웹 페이지 http://www.perbang.dk/rgbgradient/을 사용하고 필요한 단계 수를 사용하는 것이 좋습니다. 예를 들어 in this image을 표시하면 녹색에서 파란색으로 2를 간단히 선택할 수 있습니다. gradientColors 변수에 16 진수 코드를 복사하면 문제를 해결할 수 있습니다.