自定义HighCharts – 更改plotLines的高度，默认情况下在特定的x和y处显示标记值

我正在尝试自定义highcharts

1）我需要改变情节线的高度

2）在特定位置显示标记图像本身内的标记值（顶部的白色圆圈内）

这是我迄今取得的成就

Highcharts.setOptions({ global: { useUTC: false } }); /*function updateData(x,y) { var series = chart.series[0]; series.addPoint([x, y], true, true); }*/ var chart; $(function () { var color = '#AA34FF'; $('#container').highcharts({ chart: { events: { load: function(event) { _bindCustomEvents(); } }, backgroundColor: 'transparent' }, series: [ { color: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ /*[0, '#a83e3e'], [0.21, '#d34e47'], [0.40, '#edbb5a'], [0.57, '#e2e57a'], [0.76, '#8dcc63'], [1, '#7ab237']*/ [0, '#7ab237'], [0.21, '#8dcc63'], [0.40, '#e2e57a'], [0.57, '#edbb5a'], [0.76, '#d34e47'], [1, '#a83e3e'] ] }, lineWidth: 4, marker: { enabled: false, fillColor: '#FFFFFF', lineWidth: 2, lineColor: null, }, type: 'spline', data: [1, 2, 5, 3, 6, 7, 4], backgroundColor: 'transparent', plotShadow : false }, { name: '', marker: { symbol: 'diamond' }, //same inmage for all points marker: { symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)' }, data: [8,8,8,8,8,8,8], type:'scatter' }, { name: '', marker: { symbol: 'diamond' }, //same inmage for all points marker: { symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)' }, data: [-1,-1,-1,-1,-1,-1,-1], type:'scatter' } ], xAxis: { categories: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ], title: { enabled: true, text: null, }, labels: { style: { fontFamily: 'gestaregular', fontSize: '16px', color:'#fff' } }, plotLines: [ { // mark the weekend color: 'rgba(255,255,255,0.3)', width: 1, value: 0, dashStyle: 'dash', zIndex:10 }, { color: 'rgba(255,255,255,0.3)', width: 1, value: 1, dashStyle: 'dash', zIndex:10 }, { color: 'rgba(255,255,255,0.3)', width: 1, value: 2, dashStyle: 'dash', zIndex:10 }, { color: 'rgba(255,255,255,0.3)', width: 1, value: 3, dashStyle: 'dash', zIndex:10 }, { color: 'rgba(255,255,255,0.3)', width: 1, value: 4, dashStyle: 'dash', zIndex:10 }, { color: 'rgba(255,255,255,0.3)', width: 1, value: 5, dashStyle: 'dash', zIndex:10 }, { color: 'rgba(255,255,255,0.3)', width: 1, value: 6, dashStyle: 'dash', zIndex:10 }], lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', }, yAxis: { labels: { enabled: false }, title: { enabled: true, text: null, } }, legend: { enabled: false }, minorTickLength: 0, tickLength: 0 }); }); function _bindCustomEvents() { var chart = $('#container').highcharts(); chart.setTitle({ text: ''}); $('.highcharts-axis').hide(); $('.highcharts-grid').hide(); $('.highcharts-axis').find('path').hide(); } 

FIDDLE LINK

这就是我想要它的样子：它不是顶部圆圈中的“2”，而应该是来自中心样条线的相应值[1,2,5,3,6,7,4]

Answer 1

1） plotLines是无限的。 延伸到绘图区域。 那么，为了限制这一点，你如何改变你的yAxis max：

 yAxis: { max: 8, labels: { enabled: false }, title: { enabled: true, text: null } }, 

或者，您可以在所需的点上创建一个column系列，并为它们提供所需高度的特定值。 使列变薄以模仿plotLines将有助于：

 series: [{ name: '', type: 'column', pointWidth: 1, borderWidth: 0, data: [8, 8, 8, 8, 8, 8, 8] }, ... 

2）圈子里有哪些值（我猜）？ “系列1：XX”？ 还是整个工具提示？

编辑：对于问题2，您可以使用dataLabel上的formatterfunction为散点图系列（您的圆圈）执行此操作。 这是function：

 var customFormatPoint = function (pointX, seriesIndex) { var theChart = $('#container').highcharts(); var yValue = null; var points = theChart.series[seriesIndex].options.data[pointX]; return points; }; 

你这叫来自：

 series: [{ name: '', type: 'column', pointWidth: 1, borderWidth: 0, dataLabels: { enabled: true, formatter: function () { return customFormatPoint(this.point.x, 1); } }, data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70] }, {... 

这里的关键元素是你有this.point.x ，它是散点的xAxis位置。 然后，您需要发送包含要在dataLabel显示的y值的系列的dataLabel 。

我还删除了plotLines并创建了一个系列，其中只包含宽度为1且没有边框的条形图。 我不得不乱七八糟地得到条形的末端（它的最大值）与散射圆直径一致。

请看这个jsFiddle 。