Highstocks - 悬停在一个点上时显示年份
Highstocks - Display year when hovering over a point
在 highstocks 演示中 - https://www.highcharts.com/stock/demo/basic-line - 当鼠标悬停在一个点上时,您可以看到工具提示出现在底部,其中包含日、月和年。
但是在我的演示中 - http://jsfiddle.net/czsLpfp0/2/ - 你可以看到没有显示年份。
谁能解释一下我是如何在 'tooltip' 中显示年份的?
// Create the chart
Highcharts.stockChart('container', {
"foo": 2,
"chart": {
"zoomType": "x"
},
"exporting": {
"enabled": false
},
"rangeSelector": {
"enabled": true
},
"navigator": {
"enabled": true
},
"size": {
"height": "400"
},
"series": [{
"name": "publishedDate._date_dt",
"data": [
[746866800000, 1],
[788947200000, 2],
[791625600000, 1],
[796723200000, 1],
[801990000000, 1],
[807260400000, 1],
[817804800000, 1],
[820483200000, 1],
[830242800000, 1],
[833612400000, 5],
[836204400000, 1],
[844153200000, 1],
[852105600000, 2],
[854784000000, 1],
[857203200000, 2],
[865148400000, 1],
[867740400000, 1],
[870418800000, 1],
[873097200000, 2],
[875689200000, 1],
[878371200000, 1],
[880963200000, 1],
[883641600000, 2],
[888739200000, 1],
[894006000000, 3],
[896684400000, 3],
[899276400000, 1],
[904633200000, 1],
[909907200000, 1],
[925542000000, 2],
[928220400000, 1],
[933490800000, 2],
[934182000000, 1],
[936169200000, 1],
[938761200000, 3],
[941443200000, 1],
[944035200000, 3],
[946713600000, 1],
[958374000000, 1],
[959842800000, 1],
[962434800000, 2],
[965113200000, 3],
[975657600000, 2],
[978336000000, 1],
[988700400000, 2],
[1001919600000, 1],
[1004601600000, 1],
[1014969600000, 7],
[1017648000000, 1],
[1020236400000, 1],
[1025506800000, 3],
[1028185200000, 3],
[1030863600000, 1],
[1033455600000, 2],
[1036137600000, 2],
[1038729600000, 3],
[1041408000000, 2],
[1044086400000, 1],
[1051772400000, 3],
[1057042800000, 2],
[1062399600000, 2],
[1067673600000, 2],
[1078128000000, 2],
[1091343600000, 2],
[1096614000000, 2],
[1099296000000, 3],
[1101888000000, 2],
[1109664000000, 15],
[1128150000000, 2],
[1141200000000, 3],
[1162368000000, 3],
[1167638400000, 2],
[1175410800000, 3],
[1180681200000, 2],
[1183273200000, 2],
[1188630000000, 2],
[1199174400000, 4],
[1207033200000, 2],
[1217574000000, 2],
[1228118400000, 4],
[1235894400000, 3],
[1238569200000, 2],
[1241161200000, 4],
[1249110000000, 3],
[1251788400000, 2],
[1254380400000, 2],
[1257058800000, 3],
[1262332800000, 2],
[1275375600000, 2],
[1290412800000, 2],
[1291190400000, 2],
[1305442800000, 2],
[1316502000000, 2],
[1321344000000, 2],
[1323676800000, 2],
[1329120000000, 2],
[1356940800000, 3],
[1370242800000, 2],
[1379574000000, 3],
[1388476800000, 3]
],
"type": "spline",
"showInNavigator": true,
"selected": true,
"id": "cc-1",
"_colorIndex": 0,
"_symbolIndex": 0
}],
"xAxis": {
"title": {},
"events": {}
},
"credits": {
"enabled": false
},
"yAxis": {
"title": {}
},
"title": {},
"subtitle": {},
"loading": false,
"chartType": "stock"
});
您可以在图表的主要选项中指定tooltip.xDateFormat
tooltip: {
xDateFormat: '%A, %b %d,%Y'
}
// Create the chart
Highcharts.stockChart('container', {
"foo": 2,
"chart": {
"zoomType": "x"
},
"exporting": {
"enabled": false
},
"rangeSelector": {
"enabled": true
},
"navigator": {
"enabled": true
},
"size": {
"height": "400"
},
"series": [{
"name": "publishedDate._date_dt",
"data": [
[746866800000, 1],
[788947200000, 2],
[791625600000, 1],
[796723200000, 1],
[801990000000, 1],
[807260400000, 1],
[817804800000, 1],
[820483200000, 1],
[830242800000, 1],
[833612400000, 5],
[836204400000, 1],
[844153200000, 1],
[852105600000, 2],
[854784000000, 1],
[857203200000, 2],
[865148400000, 1],
[867740400000, 1],
[870418800000, 1],
[873097200000, 2],
[875689200000, 1],
[878371200000, 1],
[880963200000, 1],
[883641600000, 2],
[888739200000, 1],
[894006000000, 3],
[896684400000, 3],
[899276400000, 1],
[904633200000, 1],
[909907200000, 1],
[925542000000, 2],
[928220400000, 1],
[933490800000, 2],
[934182000000, 1],
[936169200000, 1],
[938761200000, 3],
[941443200000, 1],
[944035200000, 3],
[946713600000, 1],
[958374000000, 1],
[959842800000, 1],
[962434800000, 2],
[965113200000, 3],
[975657600000, 2],
[978336000000, 1],
[988700400000, 2],
[1001919600000, 1],
[1004601600000, 1],
[1014969600000, 7],
[1017648000000, 1],
[1020236400000, 1],
[1025506800000, 3],
[1028185200000, 3],
[1030863600000, 1],
[1033455600000, 2],
[1036137600000, 2],
[1038729600000, 3],
[1041408000000, 2],
[1044086400000, 1],
[1051772400000, 3],
[1057042800000, 2],
[1062399600000, 2],
[1067673600000, 2],
[1078128000000, 2],
[1091343600000, 2],
[1096614000000, 2],
[1099296000000, 3],
[1101888000000, 2],
[1109664000000, 15],
[1128150000000, 2],
[1141200000000, 3],
[1162368000000, 3],
[1167638400000, 2],
[1175410800000, 3],
[1180681200000, 2],
[1183273200000, 2],
[1188630000000, 2],
[1199174400000, 4],
[1207033200000, 2],
[1217574000000, 2],
[1228118400000, 4],
[1235894400000, 3],
[1238569200000, 2],
[1241161200000, 4],
[1249110000000, 3],
[1251788400000, 2],
[1254380400000, 2],
[1257058800000, 3],
[1262332800000, 2],
[1275375600000, 2],
[1290412800000, 2],
[1291190400000, 2],
[1305442800000, 2],
[1316502000000, 2],
[1321344000000, 2],
[1323676800000, 2],
[1329120000000, 2],
[1356940800000, 3],
[1370242800000, 2],
[1379574000000, 3],
[1388476800000, 3]
],
"type": "spline",
"showInNavigator": true,
"selected": true,
"id": "cc-1",
"_colorIndex": 0,
"_symbolIndex": 0,
}],
"xAxis": {
"title": {},
"events": {}
},
"credits": {
"enabled": false
},
"yAxis": {
"title": {}
},
"title": {},
"subtitle": {},
"loading": false,
"chartType": "stock",
tooltip: {
xDateFormat: '%A, %b %d, %Y'
}
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
在 highstocks 演示中 - https://www.highcharts.com/stock/demo/basic-line - 当鼠标悬停在一个点上时,您可以看到工具提示出现在底部,其中包含日、月和年。
但是在我的演示中 - http://jsfiddle.net/czsLpfp0/2/ - 你可以看到没有显示年份。
谁能解释一下我是如何在 'tooltip' 中显示年份的?
// Create the chart
Highcharts.stockChart('container', {
"foo": 2,
"chart": {
"zoomType": "x"
},
"exporting": {
"enabled": false
},
"rangeSelector": {
"enabled": true
},
"navigator": {
"enabled": true
},
"size": {
"height": "400"
},
"series": [{
"name": "publishedDate._date_dt",
"data": [
[746866800000, 1],
[788947200000, 2],
[791625600000, 1],
[796723200000, 1],
[801990000000, 1],
[807260400000, 1],
[817804800000, 1],
[820483200000, 1],
[830242800000, 1],
[833612400000, 5],
[836204400000, 1],
[844153200000, 1],
[852105600000, 2],
[854784000000, 1],
[857203200000, 2],
[865148400000, 1],
[867740400000, 1],
[870418800000, 1],
[873097200000, 2],
[875689200000, 1],
[878371200000, 1],
[880963200000, 1],
[883641600000, 2],
[888739200000, 1],
[894006000000, 3],
[896684400000, 3],
[899276400000, 1],
[904633200000, 1],
[909907200000, 1],
[925542000000, 2],
[928220400000, 1],
[933490800000, 2],
[934182000000, 1],
[936169200000, 1],
[938761200000, 3],
[941443200000, 1],
[944035200000, 3],
[946713600000, 1],
[958374000000, 1],
[959842800000, 1],
[962434800000, 2],
[965113200000, 3],
[975657600000, 2],
[978336000000, 1],
[988700400000, 2],
[1001919600000, 1],
[1004601600000, 1],
[1014969600000, 7],
[1017648000000, 1],
[1020236400000, 1],
[1025506800000, 3],
[1028185200000, 3],
[1030863600000, 1],
[1033455600000, 2],
[1036137600000, 2],
[1038729600000, 3],
[1041408000000, 2],
[1044086400000, 1],
[1051772400000, 3],
[1057042800000, 2],
[1062399600000, 2],
[1067673600000, 2],
[1078128000000, 2],
[1091343600000, 2],
[1096614000000, 2],
[1099296000000, 3],
[1101888000000, 2],
[1109664000000, 15],
[1128150000000, 2],
[1141200000000, 3],
[1162368000000, 3],
[1167638400000, 2],
[1175410800000, 3],
[1180681200000, 2],
[1183273200000, 2],
[1188630000000, 2],
[1199174400000, 4],
[1207033200000, 2],
[1217574000000, 2],
[1228118400000, 4],
[1235894400000, 3],
[1238569200000, 2],
[1241161200000, 4],
[1249110000000, 3],
[1251788400000, 2],
[1254380400000, 2],
[1257058800000, 3],
[1262332800000, 2],
[1275375600000, 2],
[1290412800000, 2],
[1291190400000, 2],
[1305442800000, 2],
[1316502000000, 2],
[1321344000000, 2],
[1323676800000, 2],
[1329120000000, 2],
[1356940800000, 3],
[1370242800000, 2],
[1379574000000, 3],
[1388476800000, 3]
],
"type": "spline",
"showInNavigator": true,
"selected": true,
"id": "cc-1",
"_colorIndex": 0,
"_symbolIndex": 0
}],
"xAxis": {
"title": {},
"events": {}
},
"credits": {
"enabled": false
},
"yAxis": {
"title": {}
},
"title": {},
"subtitle": {},
"loading": false,
"chartType": "stock"
});
您可以在图表的主要选项中指定tooltip.xDateFormat
tooltip: {
xDateFormat: '%A, %b %d,%Y'
}
// Create the chart
Highcharts.stockChart('container', {
"foo": 2,
"chart": {
"zoomType": "x"
},
"exporting": {
"enabled": false
},
"rangeSelector": {
"enabled": true
},
"navigator": {
"enabled": true
},
"size": {
"height": "400"
},
"series": [{
"name": "publishedDate._date_dt",
"data": [
[746866800000, 1],
[788947200000, 2],
[791625600000, 1],
[796723200000, 1],
[801990000000, 1],
[807260400000, 1],
[817804800000, 1],
[820483200000, 1],
[830242800000, 1],
[833612400000, 5],
[836204400000, 1],
[844153200000, 1],
[852105600000, 2],
[854784000000, 1],
[857203200000, 2],
[865148400000, 1],
[867740400000, 1],
[870418800000, 1],
[873097200000, 2],
[875689200000, 1],
[878371200000, 1],
[880963200000, 1],
[883641600000, 2],
[888739200000, 1],
[894006000000, 3],
[896684400000, 3],
[899276400000, 1],
[904633200000, 1],
[909907200000, 1],
[925542000000, 2],
[928220400000, 1],
[933490800000, 2],
[934182000000, 1],
[936169200000, 1],
[938761200000, 3],
[941443200000, 1],
[944035200000, 3],
[946713600000, 1],
[958374000000, 1],
[959842800000, 1],
[962434800000, 2],
[965113200000, 3],
[975657600000, 2],
[978336000000, 1],
[988700400000, 2],
[1001919600000, 1],
[1004601600000, 1],
[1014969600000, 7],
[1017648000000, 1],
[1020236400000, 1],
[1025506800000, 3],
[1028185200000, 3],
[1030863600000, 1],
[1033455600000, 2],
[1036137600000, 2],
[1038729600000, 3],
[1041408000000, 2],
[1044086400000, 1],
[1051772400000, 3],
[1057042800000, 2],
[1062399600000, 2],
[1067673600000, 2],
[1078128000000, 2],
[1091343600000, 2],
[1096614000000, 2],
[1099296000000, 3],
[1101888000000, 2],
[1109664000000, 15],
[1128150000000, 2],
[1141200000000, 3],
[1162368000000, 3],
[1167638400000, 2],
[1175410800000, 3],
[1180681200000, 2],
[1183273200000, 2],
[1188630000000, 2],
[1199174400000, 4],
[1207033200000, 2],
[1217574000000, 2],
[1228118400000, 4],
[1235894400000, 3],
[1238569200000, 2],
[1241161200000, 4],
[1249110000000, 3],
[1251788400000, 2],
[1254380400000, 2],
[1257058800000, 3],
[1262332800000, 2],
[1275375600000, 2],
[1290412800000, 2],
[1291190400000, 2],
[1305442800000, 2],
[1316502000000, 2],
[1321344000000, 2],
[1323676800000, 2],
[1329120000000, 2],
[1356940800000, 3],
[1370242800000, 2],
[1379574000000, 3],
[1388476800000, 3]
],
"type": "spline",
"showInNavigator": true,
"selected": true,
"id": "cc-1",
"_colorIndex": 0,
"_symbolIndex": 0,
}],
"xAxis": {
"title": {},
"events": {}
},
"credits": {
"enabled": false
},
"yAxis": {
"title": {}
},
"title": {},
"subtitle": {},
"loading": false,
"chartType": "stock",
tooltip: {
xDateFormat: '%A, %b %d, %Y'
}
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>