当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - using jQuery to select and edit nested values in this script

问题描述:

Is it possible to access and change the elements of an object within a function using jQuery? For example, can I use a separate jQuery function to access line 33 of the JS on this JSfiddle and dynamically change the content of the chart title?

(I've tried replacing text: 'Activity', with a reference to an object property such as text: myObj.title, with no luck)

$(function () {

// Uncomment to style it like Apple Watch

/*

if (!Highcharts.theme) {

Highcharts.setOptions({

chart: {

backgroundColor: 'black'

},

colors: ['#F62366', '#9DFF02', '#0CCDD6'],

title: {

style: {

color: 'silver'

}

},

tooltip: {

style: {

color: 'silver'

}

}

});

}

// */

Highcharts.chart('container', {

chart: {

type: 'solidgauge',

marginTop: 50

},

title: {

text: 'Activity',

style: {

fontSize: '24px'

}

},

tooltip: {

borderWidth: 0,

backgroundColor: 'none',

shadow: false,

style: {

fontSize: '16px'

},

pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',

positioner: function (labelWidth) {

return {

x: 200 - labelWidth / 2,

y: 180

};

}

},

pane: {

startAngle: 0,

endAngle: 360,

background: [{ // Track for Move

outerRadius: '112%',

innerRadius: '88%',

backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),

borderWidth: 0

}, { // Track for Exercise

outerRadius: '87%',

innerRadius: '63%',

backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),

borderWidth: 0

}, { // Track for Stand

outerRadius: '62%',

innerRadius: '38%',

backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),

borderWidth: 0

}]

},

yAxis: {

min: 0,

max: 100,

lineWidth: 0,

tickPositions: []

},

plotOptions: {

solidgauge: {

borderWidth: '34px',

dataLabels: {

enabled: false

},

linecap: 'round',

stickyTracking: false

}

},

series: [{

name: 'Move',

borderColor: Highcharts.getOptions().colors[0],

data: [{

color: Highcharts.getOptions().colors[0],

radius: '100%',

innerRadius: '100%',

y: 80

}]

}, {

name: 'Exercise',

borderColor: Highcharts.getOptions().colors[1],

data: [{

color: Highcharts.getOptions().colors[1],

radius: '75%',

innerRadius: '75%',

y: 65

}]

}, {

name: 'Stand',

borderColor: Highcharts.getOptions().colors[2],

data: [{

color: Highcharts.getOptions().colors[2],

radius: '50%',

innerRadius: '50%',

y: 50

}]

}]

},

/**

* In the chart load callback, add icons on top of the circular shapes

*/

function callback() {

// Move icon

this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])

.attr({

'stroke': '#303030',

'stroke-linecap': 'round',

'stroke-linejoin': 'round',

'stroke-width': 2,

'zIndex': 10

})

.translate(190, 26)

.add(this.series[2].group);

// Exercise icon

this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])

.attr({

'stroke': '#303030',

'stroke-linecap': 'round',

'stroke-linejoin': 'round',

'stroke-width': 2,

'zIndex': 10

})

.translate(190, 61)

.add(this.series[2].group);

// Stand icon

this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])

.attr({

'stroke': '#303030',

'stroke-linecap': 'round',

'stroke-linejoin': 'round',

'stroke-width': 2,

'zIndex': 10

})

.translate(190, 96)

.add(this.series[2].group);

});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

<div id="container" style="width: 400px; height: 400px; margin: 0 auto">

</div>

网友答案:

I would suggest to create a separate object for providing options in .chart method (second param). You can set the required value in option.title.text before the chart method executes. No change will be reflected if you change the value after method execute.

But if you want to change the value after the chart has been created then you will have to refer documentation of the Highcharts plugin.

hope it helps.

网友答案:

No, the script is self-executing anonymous function, you can't access anything inside it because it'll be out of scope. The scope within that function can only be accessed by other members inside it.

The only way to access something internally is to attache that value or method to the window object from within. This is essentially the "global" scope in Javascript.

window.whatever = 'something';

Then, you'll be able to access it from another script.

console.log(window.whatever);
分享给朋友:
您可能感兴趣的文章:
随机阅读: