如何去除背景颜色？

Question

你能告诉我如何给不同的颜色线。实际上我在我的应用程序中使用了highchart库。我想显示三种颜色的带状线或线。 我无法为单个线条赋予颜色，但可以为单个部分赋予背景颜色。 其实我想给不同的线条颜色而不是背景颜色。

我不想要背景颜色（绿色、prink、黑色）。 我想要三种颜色的线，分别是绿色、粉红色和黑色

这是我的代码：

{

        chart: {
            renderTo: 'container',
                type: 'gauge',
                backgroundColor: 'transparent',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false,
                height:240,
                width:290
        },
      credits: {
          enabled: false
      },

        title: {
            text: ''
        },

        pane: {
            center: ['50%', '75%'],
                size: '100%',
                startAngle: -120,
                endAngle: 120,
                background: [{
                borderWidth: 0,
                backgroundColor: 'transparent'
            }],
        },

不同颜色的条带和线条。 我不想要背景颜色而不是我需要给线条赋予颜色，，，我们可以给这个吗？ 我需要更改线条颜色或小条颜色，大约有 100 条小线条。 我需要以不同的颜色显示

Answer 1

默认情况下，您可以为每个 minorTicks / ticks 设置单一颜色。 我添加了像 tickStops 这样的选项，您可以在其中定义最小/最大和范围的颜色（如在绘图带中）。 然后通过片段，我们通过 attr() 函数直接在 SVG 元素上应用颜色。

选项：

yAxis:{
                    tickStops: [{
                        min: 0,
                        max: 100,
                        color: 'rgba(70,204,185,1)'
                    },{
                        min: 100,
                        max: 150,
                        color: 'rgba(232,140,240,1)',
                    },{
                        min: 150,
                        max: 200,
                        color: 'rgba(69,72,93,1)',
                    }],
}

片段：

var yAxis = chart.yAxis[0],
        ticksStops = yAxis.options.tickStops,
        each = Highcharts.each;

    for(var tick in yAxis.minorTicks) {

        var value = parseFloat(tick);

        each(ticksStops, function(tStop, i) {
            if(value >= tStop.min && value <= tStop.max) {
                yAxis.minorTicks[tick].mark.attr({
                    stroke: tStop.color
                });     
            }
        });
    }

示例： http : //jsfiddle.net/kbvC3/837/