0

Line Highchart のスタイル設定に関するヘルプを期待しています。

ここでグラフを画像のように表示しようとしています。

私のグラフの例

しかし、ブロックの色ラベルを取得するのに苦労していますか?

どんな助けでも大歓迎です！

ありがとう

$('#container').highcharts({
        chart: {
            type: 'line',
            plotBackgroundImage: 'images/fibre.jpg',
            plotBorderWidth: 0,


            /*,
            marginRight: 130,
            marginBottom: 25*/
        },
        title: 
        {
            text    : strTitle
        },
        tooltip: 
        {
            enabled: false
        },
        xAxis: 
        {
            categories: arrXAxis,               
            title: 
            {
                text: strXTitle
            },

        },          
        yAxis: 
        {
            title: 
            {
                text: ''
            },
            labels: {
                formatter: function() {
                   // return this.value +'?'
                   return('');
                }
            },
            min: 0,
            max: 10,
            minorGridLineWidth: 0,
            alternateGridColor: null,
            gridLineWidth: 0,
            plotBands: 
            [{ 
                from: intRedStart,
                to: intRedEnd,
                color: 'rgba(229, 28, 36, 0.6)',
                label: 
                {
                    text: 'High Risk',
                    style: 
                    {
                        color: '#606060'
                    }
                }
            },
            { 
                from: intAmberStart,
                to: intAmberEnd,
                color: 'rgba(239, 140, 30, 0.6)',
                label: 
                {
                    text: 'Improvement',
                    style: 
                    {
                        color: '#606060'
                    }
                }
            },
            { 
                from: intGreenStart,
                to: intGreenEnd,
                color: 'rgba(43, 174, 115, 0.6)',
                label: 
                {
                    text: 'Healthy',
                    style: 
                    {
                        color: '#606060'
                    }
                }
            }   


            ]
        },
        legend: {
           /*
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0*/
        },
        series:
        [{
            allowPointSelect: false,    
            showInLegend: false,
            data: arrData   
        }   /*, {
                name: '1',
                data: [10]
            }, {
                name: '2',
                data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: '3',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }*/]
    });
4

2 に答える 2

0

チャートhttp://api.highcharts.com/highcharts#chart.plotBackgroundImageにplotBackgroundImage を設定してから、plotBands http://jsfiddle.net/JRhaS/2/を使用できます。 

 plotBands: [{ // mark the weekend
            color: 'rgba(155,255,155,0.5)',
            from: 0,
            to: 100
        },{ // mark the weekend
            color: 'rgba(100,255,200,0.5)',
            from:100,
            to: 200
        }],
    },
于 2013-04-25T09:21:58.943 に答える
0

plotband labelsの API ドキュメントを見ると、「style」、「align」、および「verticalAlign」プロパティをいじることで、画像に似たことができるはずだと思います。お役に立てれば ：）

編集:labels.styleオブジェクトで背景色を設定できないようです。これは、ラベルが SVG 要素 (より具体的には tspan) であり、標準の HTML 要素が行うすべての css をサポートしていないためだと思います。ただし、「上」と「左」のラベルを揃えて、フォントの色を設定することで、目標に近づくことができます。背景色が本当に必要な場合は、これをご覧ください: tspan 要素の背景色

于 2013-04-25T09:16:55.330 に答える