Highcharts/columnrange自定义tooltip及数值与表单域联动实现问题

1. 自定义columnrange系列换行tooltip #

你原有配置中全局tooltip开启了shared: true，columnrange系列的pointFormatter回调内this直接指向当前点实例，无需额外取.point属性，返回内容中添加<br/>即可实现分行展示：

// columnrange系列下的tooltip配置修改为
tooltip: {
    pointFormatter: function() {
        return `LOW: ${this.low.toFixed(2)}% <br/> HIGH: ${this.high.toFixed(2)}%`;
    }
}

2. 拖拽值与表单域动态联动 #

首先新增表单输入域，再给columnrange系列添加拖拽事件监听即可实现同步更新：

第一步：新增表单HTML #

在原有container容器外添加输入框：

<figure class="highcharts-figure">
    <div id="container"></div>
    <!-- 新增表单部分 -->
    <div style="padding: 15px 0;">
        预测下限：<input type="number" step="0.01" id="lowVal" value="1"> %
        &nbsp;&nbsp;&nbsp;&nbsp;
        预测上限：<input type="number" step="0.01" id="highVal" value="3"> %
    </div>
</figure>

第二步：添加拖拽事件监听 #

在columnrange系列配置中补充drag相关属性和事件：

{
    name: 'Forecast Range',
    color: 'rgba(255,0,0,.1)',
    type: 'columnrange',
    data: [[12,1,3]],
    // 新增事件监听
    events: {
        point: {
            // 拖拽过程实时同步换为drag事件即可
            dragEnd: function () {
                document.getElementById('lowVal').value = this.low.toFixed(2);
                document.getElementById('highVal').value = this.high.toFixed(2);
            }
        }
    },
    dragDrop: {
        draggableY: true,
        // 新增允许单独拖拽上下端点配置
        draggableHigh: true,
        draggableLow: true,
        dragMinY: -10,
        dragMaxY: 10,
        dragPrecisionY: .01,
        liveRedraw: false
    },
    // tooltip配置沿用上面修改后的即可
    tooltip: {
        pointFormatter: function() {
            return `LOW: ${this.low.toFixed(2)}% <br/> HIGH: ${this.high.toFixed(2)}%`;
        }
    }
}

完整修改后代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <div style="padding: 15px 0;">
        预测下限：<input type="number" step="0.01" id="lowVal" value="1"> %
        &nbsp;&nbsp;&nbsp;&nbsp;
        预测上限：<input type="number" step="0.01" id="highVal" value="3"> %
    </div>
</figure>

<script>
var myChart;

Highcharts.setOptions({
    plotOptions: {
        series: {
            animation: false
        }
    }
});

// draw chart
myChart = Highcharts.chart('container', {
    chart: {
        type: "line",
        events: {
            click: function (e) {
                var y = Math.round(e.yAxis[0].value),
                    x=12
                    series = this.series[3].data[12];
                series.update({x, y, color: 'blue'});
            },
            drag: function (e) {
                var y = Math.round(e.yAxis[0].value),
                    x=12
                    series = this.series[3].data[12];
                series.update({x, y, color: 'blue'});
            }
        }
    },
    title: {
        text: "Forecasting History"
    },
    xAxis: {
        type: 'category',
        allowDecimals: true,
        title: {
            text: "Quarter"
        },
        plotBands: [{
            color: 'rgba(204,153,255,0.2)',
            from: 11.5,
            to: 12.5,
            label: {
                text: 'Forecast'
            }
        }]
    },
    yAxis: {
        title: {
            text: "Inflation (%)"
        },
        plotLines: [{
            value: 0,
            width: 2,
            color: '#aaa',
            zIndex: 10
        }]
    },
    tooltip: {
        style: {
            color: 'black',
            fontWeight: 'bold',
            fontSize: 13
        },
        positioner: function () {
            return { x: 80, y:0 };
        },
        shared: true,
        headerFormat: '',
        valueDecimals: 2,
        shadow: false,
        borderWidth: 2,
        borderColor: '#000000',
        shape: 'rect',
        backgroundColor: 'rgba(255,255,255,0.8)'
    },
    series: [
        {
            name: 'Inflation',
            data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null],
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
            },
        },
        {
            name: 'Central Bank Forecast',
            data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,null],
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
            },
        },
        {
            name: 'Your Forecast',
            showInLegend: false,
            data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
            },
            marker: {
                radius: 2.5,
                fillColor: 'red'
            },
        },
        {
            plotOptions: {
                columnrange: {
                    dataLabels: {
                        enabled: true,
                    }
                }
            },
            name: 'Forecast Range',
            color: 'rgba(255,0,0,.1)',
            type: 'columnrange',
            data: [[12,1,3]],
            events: {
                point: {
                    dragEnd: function () {
                        document.getElementById('lowVal').value = this.low.toFixed(2);
                        document.getElementById('highVal').value = this.high.toFixed(2);
                    }
                }
            },
            tooltip: {
                pointFormatter: function() {
                    return `LOW: ${this.low.toFixed(2)}% <br/> HIGH: ${this.high.toFixed(2)}%`;
                }
            },
            dragDrop: {
                draggableY: true,
                draggableHigh: true,
                draggableLow: true,
                groupBy: 'GroupId',
                dragMinY: -10,
                dragMaxY: 10,
                dragPrecisionY: .01,
                liveRedraw: false
            },
        }
    ], 
});
</script>

内容的提问来源于stack exchange，提问作者FloppyDogEars