调整字幕和标题以适应图表大小。

huangapple
go评论72阅读模式
英文:

align subtitle and title with respect to size of chart

问题

I'm using 'solidgauge' of highcharts.
I changed position and size of pane but my title and subtitles position is not changed.
I want their position as directed by the red arrow shown in the above image.
How can I align subtitle and title with respect to size and position of chart?

英文:

I'm using 'solidgauge' of highcharts.
I changed position and size of pane but my title and subtitles position is not changed.

调整字幕和标题以适应图表大小。

I want their position as directed by the red arrow shown in the above image.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 $(function () {
var rawData = 90,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i &gt; 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
var highCtr = document.getElementById(&#39;container&#39;);
/*var smp = $(&quot;#highCtr&quot;)[0].getContext(&#39;2d&#39;);*/
Highcharts.chart(highCtr, {
chart: {
type: &#39;solidgauge&#39;,
marginTop: 10,
height: 200,
events: {
render: function () {
debugger;
var chart = this,
renderer = chart.renderer,
subtitle = chart.subtitle,
subtitleBBox = subtitle.getBBox(),
subtitleX = subtitleBBox.x,
subtitleY = subtitleBBox.y;
renderer.text(&#39;Subtitle X: &#39; + subtitleX, subtitleX, subtitleY - 20)
.attr({
align: &#39;left&#39;
})
.add();
renderer.text(&#39;Subtitle Y: &#39; + subtitleY, subtitleX, subtitleY - 5)
.attr({
align: &#39;left&#39;
})
.add();
}
}
},
credits: {
enabled: false
},
title: {
text: &#39;Level 1&#39;
},
subtitle: {
text: rawData +&#39;%&#39;,
style: {
&#39;font-size&#39;: &#39;25px&#39;
},
/*x: -100,*/
align:&#39;center&#39;,
y: 10,
zIndex: 1,
center: [&#39;30%&#39;, &#39;65%&#39;]
/* textAlign:left*/
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: &#39;100%&#39;,
innerRadius: &#39;80%&#39;,
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: &#39;arc&#39;
}],
/*size: &#39;120%&#39;,*/
size: &#39;80%&#39;,
center: [&#39;30%&#39;, &#39;65%&#39;]
},
{
startAngle: -120,
endAngle: 120,
size: &#39;80%&#39;,
center: [&#39;30%&#39;, &#39;65%&#39;],
background: []
}],
yAxis: [{
min: 0,
max: 100,
lineWidth: 2,
lineColor: &#39;white&#39;,
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: &#39;white&#39;,
zIndex: 6,
stops: [
//[0, &#39;#fff&#39;],
//[0.101, &#39;#0f0&#39;],
//[0.201, &#39;#2d0&#39;],
//[0.301, &#39;#4b0&#39;],
//[0.401, &#39;#690&#39;],
//[0.501, &#39;#870&#39;],
//[0.601, &#39;#a50&#39;],
//[0.701, &#39;#c30&#39;],
//[0.801, &#39;#e10&#39;],
//[0.901, &#39;#f03&#39;],
//[1, &#39;#f06&#39;]
[0, &#39;#f06&#39;],
[0.101, &#39;#f03&#39;],
[0.201, &#39;#e10&#39;],
[0.301, &#39;#c30&#39;],
[0.401, &#39;#a50&#39;],
[0.501, &#39;#870&#39;],
[0.601, &#39;#690&#39;],
[0.701, &#39;#4b0&#39;],
[0.801, &#39;#2d0&#39;],
[0.901, &#39;#0f0&#39;],
[1, &#39;#fff&#39;]
]
}, {
linkedTo: 0,
pane: 1,
lineWidth: 5,
lineColor: &#39;white&#39;,
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false,
format: &#39;&lt;div style=&quot;text-align:center&quot;&gt;&lt;span style=&quot;font-size:25px;color:&#39; +
((Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || &#39;black&#39;) + &#39;&quot;&gt;{y}&lt;/span&gt;&lt;br/&gt;&#39; +
&#39;&lt;span style=&quot;font-size:12px;color:silver&quot;&gt;units&lt;/span&gt;&lt;/div&gt;&#39;
},
point: {
events: {
mouseOver: function () {
var point = this,
yAxis = point.series.yAxis,
subtitle = yAxis.subtitle;
if (subtitle) {
var yAxisValue = point.y,
yAxisText = yAxis.axisTitle.textStr;
subtitle.attr({
text: yAxisText + &#39;: &#39; + yAxisValue
});
}
},
mouseOut: function () {
var point = this,
yAxis = point.series.yAxis,
subtitle = yAxis.subtitle;
if (subtitle) {
subtitle.attr({
text: &#39;&#39;
});
}
}
}
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: &#39;100%&#39;,
innerRadius: &#39;80%&#39;,
data: data
}]
});
});

<!-- language: lang-html -->

&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/solid-gauge.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;container&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

How can I align subtitle and title with respect to size and position of chart?

答案1

得分: 2

你可以尝试这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing Doc</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
    <div id="chartContainer" style="width:100%; height:400px;"></div>
    <script>
        var rawData = 90;
        var chartData = getData(rawData);

        function getData(rawData) {
            var data = [],
                start = Math.round(Math.floor(rawData / 10) * 10);
            data.push(rawData);
            for (i = start; i > 0; i -= 10) {
                data.push({
                    y: i
                });
            }
            return data;
        }

        function drawChart() {
            var options = {
                chart: {
                    type: 'solidgauge',
                    marginTop: 50
                },
                title: {
                    text: 'Speedometer'
                },
                pane: {
                    startAngle: -120,
                    endAngle: 120,
                    background: [{
                        outerRadius: '100%',
                        innerRadius: '80%',
                        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
                        borderWidth: 0,
                        shape: 'arc'
                    }],
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    lineWidth: 2,
                    lineColor: 'white',
                    tickInterval: 10,
                    labels: {
                        enabled: false
                    },
                    minorTickWidth: 0,
                    tickLength: 50,
                    tickWidth: 5,
                    tickColor: 'white',
                    zIndex: 6,
                    stops: [
                        [0, '#f06'],
                        [0.101, '#f03'],
                        [0.201, '#e10'],
                        [0.301, '#c30'],
                        [0.401, '#a50'],
                        [0.501, '#870'],
                        [0.601, '#690'],
                        [0.701, '#4b0'],
                        [0.801, '#2d0'],
                        [0.901, '#0f0'],
                        [1, '#fff']
                    ]
                },
                series: [{
                    name: 'Speed',
                    data: chartData,
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px">{y}</span><br/>' +
                            '<span style="font-size:12px;opacity:0.4">km/h</span></div>',
                        borderWidth: 0,
                        y: -20
                    },
                    tooltip: {
                        valueSuffix: ' km/h'
                    },
                    borderWidth: 0,
                    color: Highcharts.getOptions().colors[0],
                    radius: '100%',
                    innerRadius: '80%',
                    dial: {
                        radius: '100%',
                        backgroundColor: Highcharts.getOptions().colors[0],
                        baseWidth: 10,
                        topWidth: 1,
                        baseLength: '90%',
                        rearLength: '0%'
                    }
                }]
            };

            var chart = Highcharts.chart('chartContainer', options);
        }

        drawChart();
    </script>
</body>
</html>
英文:

You can try this one

&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Testing Doc&lt;/title&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/solid-gauge.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;chartContainer&quot; style=&quot;width:100%; height:400px;&quot;&gt;&lt;/div&gt;
&lt;script&gt;
var rawData = 90;
var chartData = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i &gt; 0; i -= 10) {
data.push({
y: i
});
}
return data;
} 
function drawChart(){
// Define chart options
var options = {
chart: {
type: &#39;solidgauge&#39;,
marginTop: 50
},
title: {
text: &#39;Speedometer&#39;
},
pane:  {
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: &#39;100%&#39;,
innerRadius: &#39;80%&#39;,
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: &#39;arc&#39;
}], 
}  ,
yAxis: {
min: 0,
max: 100,
lineWidth: 2,
lineColor: &#39;white&#39;,
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: &#39;white&#39;,
zIndex: 6,
stops: [
//[0, &#39;#fff&#39;],
//[0.101, &#39;#0f0&#39;],
//[0.201, &#39;#2d0&#39;],
//[0.301, &#39;#4b0&#39;],
//[0.401, &#39;#690&#39;],
//[0.501, &#39;#870&#39;],
//[0.601, &#39;#a50&#39;],
//[0.701, &#39;#c30&#39;],
//[0.801, &#39;#e10&#39;],
//[0.901, &#39;#f03&#39;],
//[1, &#39;#f06&#39;]
[0, &#39;#f06&#39;],
[0.101, &#39;#f03&#39;],
[0.201, &#39;#e10&#39;],
[0.301, &#39;#c30&#39;],
[0.401, &#39;#a50&#39;],
[0.501, &#39;#870&#39;],
[0.601, &#39;#690&#39;],
[0.701, &#39;#4b0&#39;],
[0.801, &#39;#2d0&#39;],
[0.901, &#39;#0f0&#39;],
[1, &#39;#fff&#39;]
]
},
series: [{
name: &#39;Speed&#39;,
data: chartData,
dataLabels: {
format: &#39;&lt;div style=&quot;text-align:center&quot;&gt;&lt;span style=&quot;font-size:25px&quot;&gt;{y}&lt;/span&gt;&lt;br/&gt;&#39; +
&#39;&lt;span style=&quot;font-size:12px;opacity:0.4&quot;&gt;km/h&lt;/span&gt;&lt;/div&gt;&#39;,
borderWidth: 0,
y: -20
},
tooltip: {
valueSuffix: &#39; km/h&#39;
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: &#39;100%&#39;,
innerRadius: &#39;80%&#39;,
// Set dial
dial: {
radius: &#39;100%&#39;,
backgroundColor: Highcharts.getOptions().colors[0],
baseWidth: 10,
topWidth: 1,
baseLength: &#39;90%&#39;,
rearLength: &#39;0%&#39;
}
}]
};
// Create chart
var chart = Highcharts.chart(&#39;chartContainer&#39;, options);
}
drawChart();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2023年3月31日 19:01:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/75897782.html
  • highcharts
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定