在highcharts中选择plot时获取图表坐标

Getting coordinates of chart on selecting plot in highcharts

本文关键字：获取 坐标 plot highcharts 选择      更新时间：2023-09-26

我正在使用High-Charts库生成一张图像，但我有40000个多边形系列，因此绘制所有这些点需要花费大量时间。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
  </style>


<script type='text/javascript'>
$(function () {
 var options = {
        chart :{
                  type: 'polygon',
                  renderTo: 'container',
                  zoomType:'x'
        },
        title: {
            text: ''
        },
        yAxis: {
            title: false,
            gridLineWidth:0,
            lineWidth:0,
            labels:{
                enabled: false
            }
        },
        xAxis: {
            title: false,
            gridLineWidth:0,
            lineWidth:0,
            labels:{
                enabled: false
            }
        },
         plotOptions: {
            series: {
                lineWidth: 1,
                lineColor:'black',
            }
        },  
        series: []
    };
    $.getJSON('data.json', function(data) {
        options.series=data;
        var chart = new Highcharts.Chart(options);
    })
    $.getJSON('title.json', function(title) {
        options.title.text=title;
        var chart = new Highcharts.Chart(options);
    })
});
</script>
</head>
<body>
  <script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://highcharts.base.is/highcharts-downsample.js"></script>
<script src="http://highcharts.base.is/demo_data.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

</body>

示例数据。json文件

[{"showInLegend": false,"color": "#FFFFFF", "data": [[61448208.5, 10791], [61453100.5, 20575], [61451242.5, 24291], [61446350.5, 14507]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453100.5, 20575], [61453544, 21462], [61451686, 25178], [61451242.5, 24291]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453544, 21462], [61453681.5, 21737], [61451823.5, 25453], [61451686, 25178]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453681.5, 21737], [61459631.5, 33637], [61457773.5, 37353], [61451823.5, 25453]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61459631.5, 33637], [61462023.5, 38421], [61460165.5, 42137], [61457773.5, 37353]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462023.5, 38421], [61462226, 38826], [61460368, 42542], [61460165.5, 42137]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462226, 38826], [61462340, 39054], [61460482, 42770], [61460368, 42542]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462340, 39054], [61462372.5, 39119], [61460514.5, 42835], [61460482, 42770]] } 
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462372.5, 39119], [61462429.5, 39233], [61460571.5, 42949], [61460514.5, 42835]] } 
]

是否有办法将多个系列的样本降低到100个左右，或者在选择区域时创建鼠标事件，以便绘图可以根据坐标重新生成绘图，并在该范围内读取json数据块。

如果您的数据集大小为50,000点及以上，您可以考虑使用Highcharts Boost模块，该模块于2017年初发布(如果内存可用)。这里有一些很好的例子，比如这个Highcharts折线图，在600个系列中有600,000个数据点。

你只需要包含highcharts Boost模块，或者直接在一个单独的标签中，或者如果使用NPM，只需要从highcharts包中导入Boost模块:

import boost from 'highcharts/modules/boost'

然后，您可以在Highcharts选项对象中添加一些boost选项，例如:

{
    boost: {
        useGPUTranslations: true
    },
    title: {
        text: 'Highcharts Boost'
    },
    series: [{
       boostThreshold: 1, // Boost when there are more than 1                     
                            // point in the chart.
        data: [[0, 1], [1, 2], [2, 3]],
    }]
};

我发现这个模块是很大的帮助，因为我正在与多个系列> 100000个数据点每个和多个图表在一个页面上工作。

相关文章：