将标签和标记对齐在同一垂直线上（Highcharts）

Question

我想从第一个点（蓝色）开始添加一条破折号，如红色圆圈中所示。可能吗？这是我的代码

function graph(graph_id, value_array,tool_tip_title, max, min){
        $('#'+graph_id).highcharts({

            chart: {
                type: 'areaspline',
                backgroundColor:'transparent'
            },
            title: {
                text: false
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function() {
                       return moment(this.value).format("HH:mm:ss");
                   }
               }
           },
           yAxis: {
            title: {
                text: false
            },
            gridLineColor: 'transparent',
            labels:{enabled: true},
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            min: min,
            max: max

        },
        tooltip: {
            shared: true
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 1
            },
            series: {
            tooltip: {
                dateTimeLabelFormats: {
                    second:"%A, %b %e, %H:%M:%S"
                }
            },
             marker: {
                fillColor: '#3D84B1',
                lineWidth: 2,
                lineColor: 'white',
                radius: 6

            }
        }
    },
    series: [{
        showInLegend: false,
        name: tool_tip_title,
        color: "#EC615F",
        data: value_array
    }]
});
}

我也尝试将 startOnTick 设置为 true 并将 min 设置为 x 轴的最小日期时间，但没有任何反应。

Answer 1

您可以根据您的最小数据使用 startOnTick 和 min。

startOnTick: true,
min:  your smallest data of xAxis/in date use first timestamp of sorted data

Answer 2

Highcharts 默认计算一些不错的日期，有时第一个可能的 label/datapoint 不适合 'nice labels' 算法。如果您想显示特定标签，请使用 xAxis.tickPositioner。对于您的情况，我认为您可以简单地添加两个额外的日期，如下所示：

tickPositioner: function() {
  var tp = this.tickPositions;           // get default positions

  tp.splice(0, 1, this.min);             // replace first label
  tp.splice(tp.length - 1, 1, this.max); // replace last label

  return tp;
}

简单演示：http://jsfiddle.net/p98rggva/

将标签和标记对齐在同一垂直线上（Highcharts）

Align label and the marker on the same vertical line(Highcharts)

javascript

jquery

highcharts

highstock