Question

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

           x                         y
           0                         34
           0.1                       35 
           0.2                       67
           0.3                       98

如果图像中所示，选择的绘图区域和其他方式如何突出显示表格中的选定缩放区域。

enter image description here

我正在使用以下示例代码用于绘图，但值是硬编码的（不是从文件中读取），因为我是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>

经过教程后，我发现setExtreme和aftersetExtreme对于捕获鼠标事件非常有用，但由于我是Java Script的新手，我无法实现它。请帮助我，并提前感谢。

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

0 个答案: