Highcharts餡餅甜甜圈與漸變

Question

有沒有辦法使用Highcharts來實現那種漸變？

這是一些jsfiddle樣板

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已經在其文檔中提供這里該徑向和線性漸變可與highcharts使用。

Answer 2

Highcharts只有兩種類型的漸變，線性和徑向，因此您無法使用它們解決問題。 這就是為什么我開始考慮如何做到這一點，並且在浪費了大量時間之后，我決定通過將圖表分成不同顏色的小片來實現它。 然后我有一個帶有100個小切片的甜甜圈/餅圖，每個切片都有不同的顏色。

漸變顏色從0降低到100％ 漸變顏色從0降低到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/並使用您需要的步驟數。 例如，當我在此圖像中顯示時，您可以簡單地從綠色到藍色選擇2。 將十六進制代碼復制到gradientColors變量后，您將能夠解決您的問題。