2

高いグラフを使用していますが、下の画像のように、SVG の外側の要素で大きなツールチップが切り取られるという問題が発生しています。

ここに画像の説明を入力

useHTMLカスタム CSS をこれらの要素に適用しているため、ツールチップと xAxisのオプションは true に設定されています。

ツールチップをトリミングしないようにする方法はありますか?

私のハイチャートコードは次のようになります。

        return {
        chart: {
            renderTo: this._chartContainer,
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: this._getTitle(values)
        },
        xAxis: {
            categories: values.rows.labels[0],
            labels: {
                formatter: function() {
                    return '<span class="xAxisTruncate" title="' + this.value + '">'+ this.value +'</span>';
                },
                useHTML: true
            }
        },
        yAxis: {
            max: this._getMax(),
            min: this._getMin(),
            gridLineWidth: 2,
            opposite: true,
            tickInterval: 31 * 24 * 3600 * 1000,
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%b %y'
            },
            title: {
                text: yAxisTitleText
            },
            endOnTick: false,
            labels: {
                align: 'left'
            }
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderColor: 'transparent',
                borderRadius: 5,
                groupPadding: 0.05
            },
            columnrange: {
                dataLabels: {
                    enabled: true
                },
                animation: false,
                colorByPoint: false
            }
        },
        legend: {
            enabled: false
        },
        series: columnRangeSeries,
        tooltip: {
            enabled: true,
            useHTML: true,
            formatter: function(){
                return this.point.toolTip;
            }
        }
    };

前もって感謝します。

4

1 に答える 1

6

同様のトピックがスタックに存在することは確かですが、見つかりません。一般に、HTML ツールチップを使用してそれを実現することができます。http: //jsfiddle.net/7wVDV/147/を参照してください。

CSS:

.highcharts-container {
  overflow: visible !important;
}
.MyChartTooltip {
  position: relative;
  z-index: 50;
  border: 2px solid rgb(0, 108, 169);
  border-radius: 5px;
  background-color: #ffffff;
  padding: 5px;
  font-size: 9pt;
}
于 2013-07-17T10:08:25.280 に答える