1

ハイチャートで生成されたチャートのタイトルにカスタム CSS ルールを追加したいと考えています。より正確には、背景と境界線を追加しようとしています。私はいくつかのアプローチを試しましたが、最も安定しているのは次のとおりです。

 title: {
            style: {
                color: '#FF00FF',
                fontWeight: 'bold',
                background-color: 'green',
                border: '1px'
            }
        },

このコードはフォントの色と太さに対して機能しますが、他のオプションは機能しません。私も試しました（backgroundColor）

例=> http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/title/style/

4

1 に答える 1

10

問題は、SVG テキスト要素に border プロパティがないため、設定できないことです。useHTML:true解決策は、タイトルを設定し、代わりに HTML タグをレンダリングすることです。例: http://jsfiddle.net/3bQne/668/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    title: {
        useHTML: true,
        style: {
            color: '#FF00FF',
            fontWeight: 'bold',
            'background-color': 'green',
            border: '1px solid black'
        }
    },
    xAxis: {
        categories: ['01/02/2012','01/03/2012','01/04/2012','01/05/2012','01/06/2012','01/07/2012'],
        labels: {
            rotation: -90,
            align: 'right'
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]        
    }]
});
于 2013-11-08T11:26:21.810 に答える