Last active
March 15, 2016 21:50
-
-
Save ry8806/20bde11c226f10a4b0d2 to your computer and use it in GitHub Desktop.
Multiline Text in Highcharts (SVG)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/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> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| <div style="width: 600px; height: 400px; margin: 0 auto"> | |
| <div id="container-speed" style="width: 300px; height: 200px; float: left"></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function () { | |
| var gaugeOptions = { | |
| chart: { | |
| type: 'solidgauge' | |
| }, | |
| title: null, | |
| pane: { | |
| center: ['50%', '50%'], | |
| size: '100%', | |
| startAngle: 0, | |
| endAngle: 360, | |
| background: { | |
| backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', | |
| innerRadius: '80%', | |
| outerRadius: '100%', | |
| shape: 'arc' | |
| } | |
| }, | |
| tooltip: { | |
| enabled: false | |
| }, | |
| // the value axis | |
| yAxis: { | |
| lineWidth: 0, | |
| minorTickInterval: null, | |
| tickPixelInterval: 400, | |
| tickWidth: 0, | |
| title: { | |
| y: -70, | |
| text: null | |
| }, | |
| labels: { | |
| enabled: false | |
| }, | |
| min: 0 | |
| }, | |
| plotOptions: { | |
| solidgauge: { | |
| dataLabels:{ | |
| enabled: false | |
| } | |
| } | |
| } | |
| }; | |
| // The speed gauge | |
| $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, { | |
| yAxis: { | |
| min: 0, | |
| max: 200, | |
| }, | |
| credits: { | |
| enabled: false | |
| }, | |
| series: [{ | |
| name: 'Speed', | |
| data: [80], | |
| innerRadius: '100%', | |
| radius: '80%' | |
| }] | |
| })); | |
| function setText(text){ | |
| var chart = $('#container-speed').highcharts(); | |
| // Create some attributes for the new text element | |
| var attr = { | |
| zIndex: 5, | |
| // Find the middle of the chart (along the x-axis) | |
| x: chart.plotLeft + (chart.plotWidth * 0.5), | |
| // Find the middle of the chart (along the y-axis) | |
| y: chart.plotHeight * 0.5 | |
| }; | |
| var textEl = chart.renderer.text(text) | |
| // ensures our text is centered | |
| .css({ 'text-anchor': 'middle'}) | |
| // add the attributes | |
| .attr(attr); | |
| // Draw it | |
| textEl.add(); | |
| }; | |
| // Add the br in for multiline - \n\r doens't work | |
| var multilineText = "Hello <br/> my name is..."; | |
| setText(multilineText); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment