我是Highcharts的初学者，我正在尝试使用Highcharts编辑器实现以下情况下的解释：
Highcharts Line Chart, display series name at the end of line series
我不知道是否仅通过使用编辑器的界面就能达到相同的目的，但是如果需要使用自定义代码，我可以在编辑器的“自定义代码”选项卡中进行操作。
我尝试在Highcharts编辑器的“定制代码”部分中输入由jlbriggs编写的代码，但是没有任何反应。
能否获得有关如何实现我想要的目标的基本解释？ 以下是我从在Highcharts Editor中创建的图形中提取的HTML代码。
<div id="highcharts-825789cd-edd9-4d9e-aba4-e3a80fa42369"></div>
<script>
(function() {
var files = ["https://code.highcharts.com/stock/highstock.js", "https://code.highcharts.com/highcharts-more.js", "https://code.highcharts.com/highcharts-3d.js", "https://code.highcharts.com/modules/data.js", "https://code.highcharts.com/modules/exporting.js", "https://code.highcharts.com/modules/funnel.js", "https://code.highcharts.com/modules/annotations.js", "https://code.highcharts.com/modules/solid-gauge.js"],
loaded = 0;
if (typeof window["HighchartsEditor"] === "undefined") {
window.HighchartsEditor = {
ondone: [cl],
hasWrapped: false,
hasLoaded: false
};
include(files[0]);
} else {
if (window.HighchartsEditor.hasLoaded) {
cl();
} else {
window.HighchartsEditor.ondone.push(cl);
}
}
function isScriptAlreadyIncluded(src) {
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].hasAttribute("src")) {
if ((scripts[i].getAttribute("src") || "").indexOf(src) >= 0 || (scripts[i].getAttribute("src") === "http://code.highcharts.com/highcharts.js" && src === "https://code.highcharts.com/stock/highstock.js")) {
return true;
}
}
}
return false;
}
function check() {
if (loaded === files.length) {
for (var i = 0; i < window.HighchartsEditor.ondone.length; i++) {
try {
window.HighchartsEditor.ondone[i]();
} catch (e) {
console.error(e);
}
}
window.HighchartsEditor.hasLoaded = true;
}
}
function include(script) {
function next() {
++loaded;
if (loaded < files.length) {
include(files[loaded]);
}
check();
}
if (isScriptAlreadyIncluded(script)) {
return next();
}
var sc = document.createElement("script");
sc.src = script;
sc.type = "text/javascript";
sc.onload = function() {
next();
};
document.head.appendChild(sc);
}
function each(a, fn) {
if (typeof a.forEach !== "undefined") {
a.forEach(fn);
} else {
for (var i = 0; i < a.length; i++) {
if (fn) {
fn(a[i]);
}
}
}
}
var inc = {},
incl = [];
each(document.querySelectorAll("script"), function(t) {
inc[t.src.substr(0, t.src.indexOf("?"))] = 1;
});
function cl() {
if (typeof window["Highcharts"] !== "undefined") {
var options = {
"title": {
"text": "One year, five year and 10 year survival estimates for the 21 most common cancers in England, 1971"
},
"subtitle": {
"text": "Survival estimates in 1971 (%)"
},
"exporting": {},
"chart": {
"type": "line",
"parallelAxes": {
"labels": {
"enabled": true
},
"alignTicks": true,
"endOnTick": true,
"max": 4,
"maxRange": 4,
"minorGridLineWidth": 0,
"gridLineWidth": -1
},
"inverted": false,
"height": 872,
"alignTicks": true,
"showAxes": false,
"ignoreHiddenSeries": true
},
"series": [{
"name": "Oesophagus",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"type": "line",
"colorByPoint": false,
"selected": true,
"showInNavigator": true,
"dataLabels": {
"enabled": false
},
"label": {
"onArea": true,
"enabled": true
},
"allowPointSelect": true,
"xAxis": 0,
"yAxis": 0
}, {
"name": "Stomach",
"turboThreshold": 0
}, {
"name": "Colon",
"turboThreshold": 0
}, {
"name": "Rectum",
"turboThreshold": 0
}, {
"name": "Pancreas",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"type": "line"
}, {
"name": "Larynx",
"turboThreshold": 0
}, {
"name": "Lung",
"turboThreshold": 0
}, {
"name": "Melanoma of skin",
"turboThreshold": 0
}, {
"name": "Breast",
"turboThreshold": 0
}, {
"name": "Cervix",
"turboThreshold": 0
}, {
"name": "Uterus",
"turboThreshold": 0
}, {
"name": "Ovary",
"turboThreshold": 0
}, {
"name": "Prostate",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"colorByPoint": false
}, {
"name": "Testis",
"turboThreshold": 0
}, {
"name": "Kidney",
"turboThreshold": 0
}, {
"name": "Bladder",
"turboThreshold": 0
}, {
"name": "Brain",
"turboThreshold": 0
}, {
"name": "Hodgkin's disease",
"turboThreshold": 0
}, {
"name": "Non-Hodgkin lymphoma",
"turboThreshold": 0
}, {
"name": "Multiple myeloma",
"turboThreshold": 0
}, {
"name": "Leukaemia",
"turboThreshold": 0
}, {
"name": "Other cancers",
"turboThreshold": 0,
"label": {
"connectorAllowed": true
}
}],
"plotOptions": {
"series": {
"dataLabels": {
"enabled": false
}
}
},
"data": {
"csv": "\"Year\";\"Oesophagus\";\"Stomach\";\"Colon\";\"Rectum\";\"Pancreas\";\"Larynx\";\"Lung\";\"Melanoma of skin\";\"Breast\";\"Cervix\";\"Uterus\";\"Ovary\";\"Prostate\";\"Testis\";\"Kidney\";\"Bladder\";\"Brain\";\"Hodgkin's disease\";\"Non-Hodgkin lymphoma\";\"Multiple myeloma\";\"Leukaemia\";\"Other cancers\"\n\"1-year\";14.7;15.3;42.6;54.1;10.2;16;16.3;74.5;74;75.6;43.7;66.1;83.3;44.9;45.4;62.8;17.6;73.9;49.4;36.8;35.4;57.3\n\"5-year\";4;5.2;25.3;23.6;2.4;4.6;4.8;40.5;51.3;59;20.5;36.9;70.5;28.5;28.9;40.9;6.6;54.2;29.3;12.1;13.1;40.4\n\"10-year\";3.3;4;23;19.1;1.3;3.1;3.2;34.9;46;55.5;17.9;25.1;69.2;23;23;33.7;5;45.2;21.7;6.8;6.6;36.9",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"legend": {
"floating": false,
"enabled": false,
"verticalAlign": "bottom",
"align": "center",
"layout": "horizontal"
},
"pane": {
"background": []
},
"responsive": {
"rules": []
},
"colorAxis": {
"plotLines": [{
"label": {
"useHTML": false,
"text": "'series'",
"x": 5,
"y": 5,
"verticalAlign": "'middle'",
"textAlign": "'left'"
}
}],
"plotBands": [{}],
"labels": {
"x": 3,
"y": 2
}
},
"tooltip": {
"shared": true,
"enabled": true
},
"rangeSelector": {
"enabled": false,
"floating": false
},
"credits": {
"enabled": false
},
"xAxis": [{
"type": "category",
"labels": {
"x": 0,
"zIndex": 7
},
"opposite": true
}],
"yAxis": [{
"title": {
"text": ""
},
"labels": {
"format": "{hide}"
},
"type": "linear"
}],
"accessibility": {
"describeSingleSeries": false,
"enabled": true
}
};
new Highcharts.Chart("highcharts-825789cd-edd9-4d9e-aba4-e3a80fa42369", options);
}
}
})();
</script>
我只需要在每行的末尾而不是在图例中显示每个系列的名称。
答案 0 :(得分：1)
在“自定义代码”部分，您需要将自定义选项与编辑器中的选项合并。应该有一个如何做到这一点的例子。本质上：
Highcharts.merge(true, options, {
// custom code
});
例如，您可以通过以下方式使用Highcharts.merge来实现此目的：
Highcharts.merge(true, options, {
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
// if last point
if(this.point === this.series.data[this.series.data.length-1]) {
return this.series.name;
}
}
}
}
}
});