javascript - Highcharts 和多图表提升

Question

所以我在同一页面上有两个图表，我对这两个图表都使用了 boost。我希望允许缩放，如果我进行缩放，那么折线图就会消失。当鼠标悬停显示数据时，数据似乎仍然存在。

看到这个小提琴： https ://jsfiddle.net/CaptainBli/wa7o2bL8/3/

    function getData(n) {
         var arr = [],
              i,
              x,
              a,
              b,
              c,
              spike;
         for (
              i = 0, x = Date.UTC(new Date().getUTCFullYear(), 0, 1) - n * 36e5;
              i < n;
              i = i + 1, x = x + 36e5
         ) {
              if (i % 100 === 0) {
                    a = 2 * Math.random();
              }
              if (i % 1000 === 0) {
                    b = 2 * Math.random();
              }
              if (i % 10000 === 0) {
                    c = 2 * Math.random();
              }
              if (i % 50000 === 0) {
                    spike = 10;
              } else {
                    spike = 0;
              }
              arr.push([
                    x,
                    2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
              ]);
         }
         return arr;
    }
    var n = 500000,
         data = getData(n);


    console.time('line');
    Highcharts.chart('container', {

         chart: {
              zoomType: 'x'
         },

         title: {
              text: 'Highcharts drawing ' + n + ' points'
         },

         subtitle: {
              text: 'Using the Boost module'
         },

         tooltip: {
              valueDecimals: 2
         },

         xAxis: {
              type: 'datetime'
         },

         series: [{
              data: data,
              lineWidth: 0.5,
              name: 'Hourly data points'
         }]

    });
    console.timeEnd('line');

    Highcharts.chart('heatcont', {

         chart: {
              type: 'heatmap',
              marginTop: 40,
              marginBottom: 80,
              plotBorderWidth: 1
         },


         title: {
              text: 'Sales per employee per weekday'
         },

         xAxis: {
              categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
         },

         yAxis: {
              categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
              title: null
         },

         colorAxis: {
              min: 0,
              minColor: '#FFFFFF',
              maxColor: Highcharts.getOptions().colors[0]
         },

         legend: {
              align: 'right',
              layout: 'vertical',
              margin: 0,
              verticalAlign: 'top',
              y: 25,
              symbolHeight: 280
         },

         tooltip: {
              formatter: function () {
                    return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                         this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
              }
         },

         series: [{
              name: 'Sales per employee',
              boostThreshold: 1,
              borderWidth: 1,
              data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
              dataLabels: {
                    enabled: true,
                    color: '#000000'
              }
         }]

    });

标签： javascripthighcharts