Question

是否允许最大切片数量（“甜甜圈馅饼”）？我使用了高图（“甜甜圈派”）的例子，我不能超过10片。注意内部切片'F'缺失。示例代码如下。

$(function () {

var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'],
    data = [{
        y: 55.11,
        color: colors[0],
        drilldown: {
            name: 'MSIE versions',
            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
            data: [10.85, 7.35, 33.06, 2.81],
            color: colors[0]
        }
    }, {
        y: 21.63,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
            data: [0.20, 0.83, 1.58, 13.12, 5.43],
            color: colors[1]
        }
    }, {
        y: 11.94,
        color: colors[2],
        drilldown: {
            name: 'Chrome versions',
            categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
            data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
            color: colors[2]
        }
    }, {
        y: 7.15,
        color: colors[3],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[3]
        }
    }, {
        y: 2.14,
        color: colors[4],
        drilldown: {
            name: 'Opera versions',
            categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
            data: [ 0.12, 0.37, 1.65],
            color: colors[4]
        }
    }, {
        y: 8.15,
        color: colors[5],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[5]
        }
    }, {
        y: 9.15,
        color: colors[6],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[6]
        }
    }, {
        y: 10.15,
        color: colors[7],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[7]
        }
    }, {
        y: 11.15,
        color: colors[8],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[8]
        }
    }, {
        y: 12.15,
        color: colors[9],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[9]
        }
    }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[10]
        }
    }, 
    ],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;


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

    // add browser data
    browserData.push({
        name: categories[i],
        y: data[i].y,
        color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
        brightness = 0.2 - (j / drillDataLen) / 5;
        versionsData.push({
            name: data[i].drilldown.categories[j],
            y: data[i].drilldown.data[j],
            color: Highcharts.Color(data[i].color).brighten(brightness).get()
        });
    }
}

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Browser market share, April, 2011'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        }
    },
    tooltip: {
        valueSuffix: '%'
    },
    series: [{
        name: 'Browsers',
        data: browserData,
        size: '60%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name : null;
            },
            color: 'white',
            distance: -30
        }
    }, {
        name: 'Versions',
        data: versionsData,
        size: '80%',
        innerSize: '60%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%'  : null;
            }
        }
    }]
});
});

<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

样本高图 - "Donut Pie"

Answer 1

似乎Highchart的可用颜色列表有限（只有10个）。

另一位用户（user2465233）写了一个work-around，重复这些现有颜色，为图表中的切片创建新颜色。

// Workaround for the lack of colors in Highcharts.getOptions().colors
// written by user2465233

var colors = [];
for (var i = 0; i < categories.length; i++) {
    if (i < Highcharts.getOptions().colors.length) {
        colors.push(Highcharts.getOptions().colors[i]);
    } else {
        colors.push(Highcharts.getOptions().colors[i - Highcharts.getOptions().colors.length]);
    }
}

$(function() {

  var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'];

  // Workaround for the lack of colors in Highcharts.getOptions().colors
  var colors = [];
  for (var i = 0; i < categories.length; i++) {
    if (i < Highcharts.getOptions().colors.length) {
      colors.push(Highcharts.getOptions().colors[i]);
    } else {
      colors.push(Highcharts.getOptions().colors[i - Highcharts.getOptions().colors.length]);
    }
  }

  var data = [{
      y: 55.11,
      color: colors[0],
      drilldown: {
        name: 'MSIE versions',
        categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
        data: [10.85, 7.35, 33.06, 2.81],
        color: colors[0]
      }
    }, {
      y: 21.63,
      color: colors[1],
      drilldown: {
        name: 'Firefox versions',
        categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
        data: [0.20, 0.83, 1.58, 13.12, 5.43],
        color: colors[1]
      }
    }, {
      y: 11.94,
      color: colors[2],
      drilldown: {
        name: 'Chrome versions',
        categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
          'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'
        ],
        data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
        color: colors[2]
      }
    }, {
      y: 7.15,
      color: colors[3],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[3]
      }
    }, {
      y: 2.14,
      color: colors[4],
      drilldown: {
        name: 'Opera versions',
        categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
        data: [0.12, 0.37, 1.65],
        color: colors[4]
      }
    }, {
      y: 8.15,
      color: colors[5],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[5]
      }
    }, {
      y: 9.15,
      color: colors[6],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[6]
      }
    }, {
      y: 10.15,
      color: colors[7],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[7]
      }
    }, {
      y: 11.15,
      color: colors[8],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[8]
      }
    }, {
      y: 12.15,
      color: colors[9],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[9]
      }
    }, {
      y: 13.15,
      color: colors[10],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[10]
      }
    }, ],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;






  // Build the data arrays
  for (i = 0; i < dataLen; i += 1) {

    // add browser data
    browserData.push({
      name: categories[i],
      y: data[i].y,
      color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
      brightness = 0.2 - (j / drillDataLen) / 5;
      versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(data[i].color).brighten(brightness).get()
      });
    }
  }

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Browser market share, April, 2011'
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false,
        center: ['50%', '50%']
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      name: 'Browsers',
      data: browserData,
      size: '60%',
      dataLabels: {
        formatter: function() {
          return this.y > 5 ? this.point.name : null;
        },
        color: 'white',
        distance: -30
      }
    }, {
      name: 'Versions',
      data: versionsData,
      size: '80%',
      innerSize: '60%',
      dataLabels: {
        formatter: function() {
          // display only if larger than 1
          return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
        }
      }
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

当然，完全归功于user2465233。由于他/她自2013年8月以来没有在StackOverflow上“被看到”，我认为他/她不太可能回复发布答案。

编辑：

这是另一种缩短的方法。在分配颜色时，我使用modulo operation将任何切片编号映射到可用的HighChart颜色。

var color_index = i>(colors.length-1) ? i%colors.length : i;

给定任意切片编号i，这会生成一个color_index，其范围在可用颜色范围内。然后，使用color_index来引用HighChart生成的colors数组：

var this_color = colors[color_index];

// add browser data
browserData.push({
    name: categories[i],
    y: data[i].y,
    color: this_color
});

// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
    brightness = 0.2 - (j / drillDataLen) / 5;
    versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(this_color).brighten(brightness).get()
    });
}

在下面的代码段中，我添加了一堆额外的切片来展示灵活性：

$(function() {

  var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'],
    data = [{
        y: 55.11,
        color: colors[0],
        drilldown: {
          name: 'MSIE versions',
          categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
          data: [10.85, 7.35, 33.06, 2.81]
        }
      }, {
        y: 21.63,
        color: colors[1],
        drilldown: {
          name: 'Firefox versions',
          categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
          data: [0.20, 0.83, 1.58, 13.12, 5.43]
        }
      }, {
        y: 11.94,
        color: colors[2],
        drilldown: {
          name: 'Chrome versions',
          categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
            'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'
          ],
          data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22]
        }
      }, {
        y: 7.15,
        color: colors[3],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 2.14,
        color: colors[4],
        drilldown: {
          name: 'Opera versions',
          categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
          data: [0.12, 0.37, 1.65]
        }
      }, {
        y: 8.15,
        color: colors[5],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 9.15,
        color: colors[6],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 10.15,
        color: colors[7],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 11.15,
        color: colors[8],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 12.15,
        color: colors[9],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      },

      // ADDITIONAL SLICES BELOW, FOR DEMOSTRATION PURPOSES

      {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      },

      // END ADDITIONAL SLICES


    ],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;





  // Build the data arrays
  for (i = 0; i < dataLen; i += 1) {

    var color_index = i > (colors.length - 1) ? i % colors.length : i,
      this_color = colors[color_index];

    // add browser data
    browserData.push({
      name: categories[i],
      y: data[i].y,
      color: this_color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
      brightness = 0.2 - (j / drillDataLen) / 5;
      versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(this_color).brighten(brightness).get()
      });
    }

  }

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Browser market share, April, 2011'
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false,
        center: ['50%', '50%']
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      name: 'Browsers',
      data: browserData,
      size: '60%',
      dataLabels: {
        formatter: function() {
          return this.y > 5 ? this.point.name : null;
        },
        color: 'white',
        distance: -30
      }
    }, {
      name: 'Versions',
      data: versionsData,
      size: '80%',
      innerSize: '60%',
      dataLabels: {
        formatter: function() {
          // display only if larger than 1
          return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
        }
      }
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

Highchart甜甜圈派 - 是否有最大数量的切片

1 个答案:

编辑：