1

部分塗りつぶしに基づいて、バーの一部に異なる色を追加したいと考えています。

部分塗りつぶしが 0.5 (50%) の時点で、バーの半分が濃い緑色になります。パーセンテージに基づいてバーの色を定義する方法はありますか?

たとえば、0 ～ 49 を指定すると、部分塗りつぶしが赤になり、残りが白くなります。50 ～ 100 の場合、部分的な塗りつぶしが緑になり、残りが白くなります。

https://jsfiddle.net/sg0co5au/11/

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        colour:'#FF0000',
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.50,
            color:'#469E5A'
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }]

});
4

2 に答える 2

0

背景の四角形が"highcharts-point highcharts-color-0 highcharts-partfill-original"fill value のクラスであることがわかります#469E5A。それを CSS を定義した場所に変更し"white"ます。

その上のオーバーレイは <rect x="6.5" y="85.5" width="696" height="20" rx="3" ry="3" class="highcharts-partfill-overlay" clip-path="url(#highcharts-51rfx2r-4)" stroke="gray" stroke-width="1" fill="rgb(0,82,14)"></rect>

パーセンテージによる色の場合、変数を使用してパーセンテージを次のように保存しますpercent

if(percent<=49){
    document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "red")
}
else if(percent>49){
    document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "green")
}

同様に、背景ボックスの色を変更できますdocument.getElementsbyClassName()

于 2018-07-22T22:20:52.483 に答える