Question

你能告诉我如何给出不同的颜色。实际上我在我的应用程序中使用高级图书馆。我想显示三种颜色的带状线或线。我无法为单个线条赋予颜色，但我能够为各个部分提供背景颜色。实际上我想给出不同的线条颜色而不是背景颜色。

我不想要背景颜色（绿色，粉红色，黑色）。我想要三种具有绿色，粉红色和黑色的线

这是我的代码：

{

        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这样的选项，您可以在其中定义范围的最小值/最大值和颜色（如在plotbands中）。然后通过片段，我们通过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/

如何删除背景颜色？

1 个答案: