Highcharts不会绘制包含大量数据的系列

时间:2017-09-01 21:08:51

标签: javascript charts highcharts

我试图获得高图来绘制链接图。当我的数据集中没有太多数据时,它可以正常工作。现在我试图放一个约30.000点的数据集。我看到鼠标在点上,但线条不是情节?

我已经读过turboThreshold:并将其设置为turboThreshold:40000但是它仍然没有绘制线?

任何想法我做错了什么?

/的Jesper

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <script type="text/javascript" src="/js/lib/dummy.js"></script>

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

  <style type="text/css">
    .chart {
    min-width: 200px;
    max-width: 1250px;
    height: 350px;
    margin: 0 auto;
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  </style>

  <title>Highcharts Demo</title>


</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>





<script type='text/javascript'>//<![CDATA[

/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/



/**
 * In order to synchronize tooltips and crosshairs, override the
 * built-in events with handlers defined on the parent element.
 */
$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
        point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
            point.highlight(e);
        }
    }
});
/**
 * Override the reset function, we don't need to hide the tooltips and crosshairs.
 */
Highcharts.Pointer.prototype.reset = function () {
    return undefined;
};

/**
 * Highlight a point by showing tooltip, setting hover state and draw crosshair
 */
Highcharts.Point.prototype.highlight = function (event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // It is null while updating
                    chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
                }
            }
        });
    }
}

// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('http://vels.dk/beer/getdata.php?name=velsdk002', function (activity) {
    $.each(activity.datasets, function (i, dataset) {

        // Add X values
        dataset.data = Highcharts.map(dataset.data, function (val, j) {
            return [activity.xData[j], val];
        });

        $('<div class="chart">')
            .appendTo('#container')
            .highcharts({
                chart: {
                    marginLeft: 40, // Keep all charts left aligned
                    spacingTop: 20,
                    spacingBottom: 20
                },
                title: {
                    //text: dataset.name,
                    text: null,
                    align: 'left',
                    margin: 0,
                    x: 30
                },

                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },


                xAxis: {
                    type: 'datetime',
                    crosshair: true,
                    events: {
                        setExtremes: syncExtremes
                    }

                },


        yAxis: {
            title: {
                text: dataset.name
            },
            opposite: true, //flytter skala til højre
            labels: {
            align: 'left',
            x: 0,
            y: -2
            },


            plotLines: [{
                value: dataset.min,
                color: 'grey',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Estimated Final Gravity - XX SG',
                    x: 30
                }
            }, {
                value: dataset.max,
                color: 'grey',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Estimated Starting Gravity - XX SG',
                    x: 30
                }
            }]
        },



                    plotOptions: {
                        series: {
                            turboThreshold: 40000,
                            marker: {
                                enabled: false
                            }

                        }

                },




                series: [{
                    data: dataset.data,
                    name: dataset.name,
                    type: dataset.type,
                    color: Highcharts.getOptions().colors[i],
                    fillOpacity: 0.3,
                    tooltip: {
                        valueSuffix: ' ' + dataset.unit
                    }
                }]
            });
    });
});
//]]> 

</script>

  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
</script>

</body>

</html>

0 个答案:

没有答案