Question

有没有办法使用Highcharts来实现这种渐变？

enter image description here

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中提供了径向和线性渐变可以与highcharts一起使用。

Answer 2

Highcharts只有两种类型的渐变，线性和径向，所以你无法解决使用它们的问题。这就是为什么我开始考虑如何做到这一点，并且在浪费了大量时间之后，我决定通过将图表划分为具有不同颜色的小切片来实现它。然后我有一个带有100个小切片的甜甜圈/饼图，每个切片都有不同的颜色。

Gradient color degraded from 0 to 100% Gradient color degraded from 0 to 60% 我正在开发一个react-native应用程序，所以我在这里发布代码：

<强> 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变量后，您将能够解决问题。

Highcharts馅饼甜甜圈与渐变

2 个答案: