7
मेरे पास एक हाईचार्ट्स कॉलम प्लॉट है जो four series दिखाता है।हाइचार्ट्स कॉलम प्लॉट में दूसरी और तीसरी श्रृंखला के बीच एक अंतर जोड़ें, जिसमें चार श्रृंखला प्रदर्शित की गई हैं
मैं श्रृंखला एक और दो एक-दूसरे को छूने के लिए (दो नीले रंग वाले) चाहूंगा, उसके बाद एक छोटा अंतर होगा, और उसके बाद श्रृंखला तीन और चार एक-दूसरे को स्पर्श करें (नारंगी वाले)। क्या यह किया जा सकता है?
मुझे इसे स्वयं करने का कोई तरीका नहीं मिला है, और यहां पर या Google पर खोज करके कोई उदाहरण नहीं मिल रहा है। क्या कोई सुझाव देने में सक्षम है?
$(function() {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen', 'Chest', 'Sinus'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({
text: ''
});
chart.yAxis[0].setTitle({
text: 'Number'
});
if (parentSeriesName.indexOf('DLP') != -1) {
chart.xAxis[0].setTitle({
text: 'DLP range (mGy.cm)'
});
}
if (parentSeriesName.indexOf('CTDI') != -1) {
chart.xAxis[1].setTitle({
text: 'CTDI range (mGy)'
});
}
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
if (this.series.name.indexOf('DLP') != -1) {
returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
} else {
returnValue = this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
}
return returnValue;
};
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.setTitle({
text: defaultTitle
}, {
text: ''
});
chart.yAxis[0].setTitle({
text: 'DLP (mGy.cm)'
});
chart.yAxis[1].setTitle({
text: 'CTDIvol (mGy)'
});
chart.xAxis[0].setTitle({
text: ''
});
chart.xAxis[1].setTitle({
text: ''
});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({
labels: {
rotation: 90
}
});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: 'CTDIvol (mGy)'
}
});
}
}
},
title: {
text: 'CT doses'
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
labels: {
useHTML: true,
rotation: 90
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
labels: {
useHTML: true,
rotation: 90
}
}],
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}, {
title: {
text: 'CTDIvol (mGy)'
},
opposite: true
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 70
},
tooltip: {},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0.2,
pointPadding: 0
}
},
series: [{
name: 'Mean DLP',
color: '#2b8cbe',
data: [{
name: 'Abdomen',
y: 150,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 73,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 20,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'Median DLP',
color: '#7bccc4',
data: [{
name: 'Abdomen',
y: 140,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 63,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 15,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'Mean CTDI',
color: '#d7301f',
data: [{
name: 'Abdomen',
y: 57.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 25.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 43.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}, {
name: 'Median CTDI',
color: '#fdcc8a',
data: [{
name: 'Abdomen',
y: 52.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 20.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 38.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}],
drilldown: {
series: [{
name: 'Abdomen DLP',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Chest DLP',
id: 'ChestDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus DLP',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}, {
name: 'Abdomen CTDI',
id: 'AbdomenCTDI',
xAxis: 1,
data: [
['up to 20', 4],
['up to 22', 9],
['up to 24', 12],
['up to 26', 8],
['up to 28', 2]
]
}, {
name: 'Chest CTDI',
id: 'ChestCTDI',
xAxis: 1,
data: [
['up to 10', 4],
['up to 12', 9],
['up to 14', 12],
['up to 16', 8],
['up to 18', 2]
]
}, {
name: 'Sinus CTDI',
id: 'SinusCTDI',
xAxis: 1,
data: [
['up to 14', 4],
['up to 16', 9],
['up to 18', 12],
['up to 20', 8],
['up to 22', 2]
]
}]
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
आपके उत्तर के लिए बहुत धन्यवाद - यह वही है जो मुझे चाहिए। विनम्र, डेविड – David