Javascript 选择区域时如何控制highchart中的坐标（突出显示）？_Javascript_Highcharts

Javascript 选择区域时如何控制highchart中的坐标（突出显示）？

javascript highcharts

Javascript 选择区域时如何控制highchart中的坐标（突出显示）？,javascript,highcharts,Javascript,Highcharts,我正在从表格数据绘制图表。我有一个数据表如下 x y 0 34 0.1 35 0.2 67 0.3 98 如何在选择绘图区域时突出显示表格中选定的缩放区域，并

我正在从表格数据绘制图表。我有一个数据表如下

           x                         y
           0                         34
           0.1                       35 
           0.2                       67
           0.3                       98

如何在选择绘图区域时突出显示表格中选定的缩放区域，并以其他方式旋转，如图所示

我使用下面的示例代码进行绘图，但是值是硬编码的（不是从文件中读取），因为我是javascript新手

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style type="text/css">
    ${demo.css}
    </style>
    <script type="text/javascript">
    $(function () {
        $('#container').highcharts({
        chart: {
            animation:true,
            borderWidth: 2,
            zoomType: 'x'
        },
        title: {
            text: 'zoomable x y plot'
        },
        subtitle: {
                text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in'
                },
        xAxis: {
                 type: 'linear',
                 minRange: 1 // fourteen days
        },
        yAxis: {
                  title: {
                  text: 'Exchange rate'
               }
        },
        legend: {
           enabled: false
        },
        plotOptions: {
            area: {
            fillColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1,    Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            marker: {
                radius: 2
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    },
    series: [{
        type: 'area',
        name: 'USD to EUR',
        pointInterval: .1,
        pointStart: 0,
        data: [
            34,35,67,98
        ]
    }]
   });
 });
    </script>
</head>
 <body>
 <script src="../../js/highcharts.js"></script>
 <script src="../../js/modules/exporting.js"></script>

 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

 </body>
 </html>


海图示例
${demo.css}
$（函数（）{
$（“#容器”）。高图({
图表：{
动画：没错，
边界宽度：2，
zoomType:'x'
},
标题：{
文本：“可缩放x y绘图”
},
副标题:{
text:document.ontouchstart==未定义？
'在绘图区域中单击并拖动以放大'：
“收缩图表以放大”
},
xAxis：{
类型：'线性'，
最小范围：1//14天
},
亚克斯：{
标题：{
文字：“汇率”
}
},
图例：{
已启用：false
},
打印选项：{
面积：{
填充颜色：{
线性半径：{x1:0，y1:0，x2:0，y2:1}，
停止：[
[0，Highcharts.getOptions（）.Color[0]]，
[1，Highcharts.Color（Highcharts.getOptions（）.colors[0]）。setOpacity（0）。get（'rgba'）]
]
},
标记：{
半径：2
},
线宽：1，
国家：{
悬停：{
线宽：1
}
},
阈值：空
}
},
系列：[{
类型：'区域'，
名称：“美元兑欧元”，
点间隔：.1，
起点：0，
数据：[
34,35,67,98
]
}]
});
});

在阅读了本教程之后，我发现setExtreme和aftersetExtreme对于捕捉鼠标事件非常有用，但由于我是Java脚本的新手，所以无法实现它。请帮助我并提前感谢。

我在许多主题中向您指出，您需要捕获系列/点（在highcharts中）上的事件，然后您应该使用jquery事件在表中找到相关位置来突出显示它。谢谢！现在我可以实现它了。