Question

我必须根据我们的网站访问者编号创建一个图表（最好类似于Google Analytics的分析）。

我得到了一个文本文件，填写了访问时间，以毫秒为单位：

[1505385301633,0] [1505219341916,0] [1504999958757，   0]
[1504854145481,0] [1504601608015,0] [1504385667271，   0]
[1504380372409,0] [1504112805811,0]
[1503866251230，   0]
[1503865512105,0]
...

这是我到目前为止使用Google Charts所做的事情： https://jsfiddle.net/2djpec3s/
控制：拖动缩放，右键单击重置

  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart'], 'language':'de'});
      google.charts.setOnLoadCallback(drawChart);

      // not in use yet
      /* var date = new Date(1507130849370);
      date = msToDate(date);

      function msToDate(date) // milliseconds to year, month, day
            {
        var year = date.getFullYear();
        var month = date.getMonth();
        var date = date.getDate(); // day

            return new Date(year, month, date);
            } */

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Visitors'],
          [new Date(1507130849370), 1],
          [new Date(1507149651188), 1],
          [new Date(1507191655367), 1],
          [new Date(1507212560124), 1],
          [new Date(1507231742263), 1],
          [new Date(1507305748865), 1],
          [new Date(1507455848163), 1],
          [new Date(1507612393800), 1],
          [new Date(1507825666582), 1],
          [new Date(1507881840738), 1],
          [new Date(1507921803759), 1],
          [new Date(1508001467740), 1]
        ]);

        var options = {
          title: 'Statistics',
          explorer: {
            actions: [
                'dragToZoom',
              'rightClickToReset'
            ],
            maxZoomIn: 0.001
          },
          hAxis: {
            gridlines: {
                            units: {
                years: {format: ['y']},
                                months: {format: ['MMMM']},
                            days: {format: ['E, d. MMM']},
                            hours: {format: ["HH:mm 'Uhr'"]},
                minutes: {format: ["HH:mm 'Uhr'"]}
                            }
            },
            minorGridlines: {
                units: {
                days: {format: ['d. MMM']},
                hours: {format: ["H 'Uhr'"]},
                minutes: {format: ['HH:mm']}
                }
            }
          },
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>

问题是我无法弄清楚，数据是否或如何以特定缩放级别加入/堆叠。

我想避免的另一种方法是创建最多4个图表，包括年，月，日和小时，并使用选择框让它们在视觉上可以交换。

Answer 1

您可以通过一种方法将缩放级别设置为每个像素要显示的数据点数。以下示例使用样本范围中的平均值，但您可以获取峰值或适用于您的应用程序的任何值。这可以很好地扩展到大型数组，因为您拥有的数据点数总是等于宽度，最大复杂度是宽*分辨率。如果您总是想要获取所有数据点，只需将分辨率设置为较高的数字（或将其保留）

function getSampledData(data, zoomLevel, scrollPosition, width, resolution) {
    const sampledData = [];
    const skip = Math.max(1, zoomLevel / resolution);

    // iterate over each pixel of chart width
    for(let i = 0; i < width; i++) {
       let total = 0;
       // scrollPosition is the start pixel position of virtual scroll
       let startPoint = (i * zoomLevel) + (scrollPosition * zoomLevel);
       // zoom level is how many data points you want to show per pixel
       for(let j = startPoint; j < startPoint + zoomLevel && j < data.length; j += skip) {
          total += data[j];
       }

       sampledData.push(total / resolution);
    }
    return sampledData;
}

用毫秒创建可缩放的Google图表

1 个答案: