在highcharts甜甜圈图表中的步骤颜色阴影 [英] stepped color shading in highcharts doughnut chart

问题描述

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

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

请记住，我需要复制确切使用 highcharts 查看具有比例和颜色编码的图表。我还需要应用一些汇总逻辑，并拿出总体分数，并在图像中可以看到带有某个标记之王的彩色标度中突出显示整体分数值。 / p>

感谢您提供任何帮助。 不确定聚合等，但似乎很容易 - 只需在将数据传递到图表之前计算该值。无论如何，它看起来颜色不适合馅饼的价值。例如：安全是 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'; 
 
 //绘制点并添加设置颜色
 H.wrap（H.seriesTypes .pie.prototype，translate，function（p，positions）{
 p.call（this，positions）; 
 this.translateColors（）; 
}）; 
 
 //从heatmap复制颜色混合的方法
 H.seriesTypes.pie.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors; 
 
 //使用百分比或value或custom_param来计算颜色
 H.seriesTypes.pie.prototype.colorKey ='percentage'; 
}）（Highcharts）; 
  

正如您所看到的，您可以为饼图设置一些自定义参数来着色切片，我想这会有所帮助，例如： http://jsfiddle.net/w9nuha8n/2/ （ y 设置值，但是使用 myParam 来定义颜色）。

只需额外注意：它是Highcharts，不是您的第二个图书馆，因此，并非所有内容都与您的图片中的内容完全相同。但是可以使用渲染器（例如顶部/底部虚线）来实现。

I need to create a chart like this using highcharts - This chart is created using some other charting tool and this specific chart type is called step chart.

Basically what i need to do is for all different categories in the chart displayed above like Efficiency, Mortality etc., they can have different values like 1%, 7%, 51% etc. And i need to create a shading which will have color codes and will be displayed in scale like image with color code variation upto the accuracy of 1% value for each category. This means the color code in chart for Efficiency with value of 5% will be different from Mortality with value of 6%. Is this kind of dynamic color shading available in highcharts?

Please keep in mind that i need to replicate the exact looking chart with scale and color coding using highcharts. I also need to apply some aggregation logic and come up with overall score and highlight the overall score value in color scale with some king of marker as you can see in the image.

Thanks for any help you can provide.

解决方案

I'm not sure about aggregation etc, but seems quite easy - just calculate that values before passing data to the chart. Anyway, it looks like colors don't suit values on the pie. For example: Safety is 17%, but it's green. For me it should be red? I assume that 50% is white/grey (middle) on the color axis, so all values should be reddish. Or maybe 17% od 25% defines color, not percentage of the pie.

Anyway, I think the biggest challenge is to adapt colorAxis from heatmap. Let me help you with that: 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);

As you can see, you can set some customized parameter for a pie chart to colorize slices, I guess that will be helpful, for example: http://jsfiddle.net/w9nuha8n/2/ (y sets value, but myParam is used to define colors).

Just an extra note: It's Highcharts, not your second library, so not everything will look exactly the same way as you have in your image. But will be possible to achieve using Renderer (for example top/bottom dotted lines).

这篇关于在highcharts甜甜圈图表中的步骤颜色阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！