在highcharts圆环图中的阶梯色阴影

Question

我需要使用highcharts创建这样的图表 - 此图表是使用其他一些图表工具创建的，此特定图表类型称为步骤图表。

基本上我需要做的是对于上面显示的图表中的所有不同类别，如效率，死亡率等，它们可以有不同的值，如1％，7％，51％等。 我需要创建一个具有颜色代码的阴影，并将以图像的比例显示，颜色代码变化达到每个类别1％值的准确度。 这意味着效率值为5％的效率图表中的颜色代码与死亡率不同，值为6％。这种动态颜色着色是否可用于highcharts？

请注意，我需要使用highcharts复制具有比例和颜色编码的精确图表。我还需要应用一些聚合逻辑并提出overall score，并在图像中看到一些标记之王，用颜色标度突出显示整体得分值。

感谢您提供的任何帮助。

Answer 1

我不确定聚合等，但似乎很容易 - 只需在将数据传递给图表之前计算这些值。无论如何，看起来颜色不适合馅饼的价值。例如：Safety为17%，但绿色。对我来说应该是红色？我假设50％在颜色轴上是白色/灰色（中间），因此所有值都应该偏红。或者也许17% od 25%定义颜色，而不是饼图的百分比。

无论如何，我认为最大的挑战是从热图中调整colorAxis。让我帮助你：http://jsfiddle.net/w9nuha8n/1/

(function (H) {
    // add colorAxis
    H.seriesTypes.pie.prototype.axisTypes = ['colorAxis']; 
    H.seriesTypes.pie.prototype.optionalAxis = 'colorAxis';

    // draw points and add setting colors
    H.wrap(H.seriesTypes.pie.prototype, "translate", function (p, positions) {
        p.call(this, positions);
        this.translateColors();
    });

    // copy method from heatmap for color mixin
    H.seriesTypes.pie.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors; 

    // use "percentage" or "value" or "custom_param" to calculate color
    H.seriesTypes.pie.prototype.colorKey = 'percentage';
})(Highcharts);

如您所见，您可以为饼图设置一些自定义参数以对切片进行着色，我想这会有所帮助，例如：http://jsfiddle.net/w9nuha8n/2/（y设置值，但{{1用于定义颜色）。

只是一个额外的注意事项：它是Highcharts，而不是你的第二个图书馆，所以并非所有内容都与你图像中的完全相同。但是可以使用Renderer（例如顶部/底部虚线）来实现。