<i id='clI6l'><tr id='clI6l'><dt id='clI6l'><q id='clI6l'><span id='clI6l'><b id='clI6l'><form id='clI6l'><ins id='clI6l'></ins><ul id='clI6l'></ul><sub id='clI6l'></sub></form><legend id='clI6l'></legend><bdo id='clI6l'><pre id='clI6l'><center id='clI6l'></center></pre></bdo></b><th id='clI6l'></th></span></q></dt></tr></i><div id='clI6l'><tfoot id='clI6l'></tfoot><dl id='clI6l'><fieldset id='clI6l'></fieldset></dl></div>

      <small id='clI6l'></small><noframes id='clI6l'>

      1. <tfoot id='clI6l'></tfoot>
      2. <legend id='clI6l'><style id='clI6l'><dir id='clI6l'><q id='clI6l'></q></dir></style></legend>
        • <bdo id='clI6l'></bdo><ul id='clI6l'></ul>

        Chart.js 获取图表上当前可见点的数组

        时间:2023-11-02

              <bdo id='1jbH2'></bdo><ul id='1jbH2'></ul>

                  <tbody id='1jbH2'></tbody>

                <tfoot id='1jbH2'></tfoot>
                <legend id='1jbH2'><style id='1jbH2'><dir id='1jbH2'><q id='1jbH2'></q></dir></style></legend>

              1. <small id='1jbH2'></small><noframes id='1jbH2'>

              2. <i id='1jbH2'><tr id='1jbH2'><dt id='1jbH2'><q id='1jbH2'><span id='1jbH2'><b id='1jbH2'><form id='1jbH2'><ins id='1jbH2'></ins><ul id='1jbH2'></ul><sub id='1jbH2'></sub></form><legend id='1jbH2'></legend><bdo id='1jbH2'><pre id='1jbH2'><center id='1jbH2'></center></pre></bdo></b><th id='1jbH2'></th></span></q></dt></tr></i><div id='1jbH2'><tfoot id='1jbH2'></tfoot><dl id='1jbH2'><fieldset id='1jbH2'></fieldset></dl></div>

                  本文介绍了Chart.js 获取图表上当前可见点的数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  使用启用了缩放/平移的 Chart.js,我正在尝试编写一个函数来仅将画布上可见的内容导出到 CSV.

                  Using Chart.js with zoom/pan enabled, I am trying to write a function to export only what is visible on the canvas to CSV.

                  但我不知道如何在用户缩放/平移后仅获取可见数据点.

                  But I cannot figure out how to get only the visible datapoints after the user zooms/pans.

                  我知道我可以只查看 myChart.data.datasets 但这会获取图表中的所有点,而不仅仅是当前可见的点.

                  I know I can just look at myChart.data.datasets but that would fetch all the points in the chart, not just the currently visible ones.

                  var config = {
                      type: 'line',
                      data: {
                          // data is from API call
                      }
                          pan: {
                              enabled: true,
                              mode: 'xy'
                          },
                          zoom: {
                              enabled: true,
                              mode: 'xy'
                          },
                          bezierCurve : false
                      }
                  };
                  
                  var ctx = document.getElementById('myChart').getContext('2d');
                  window.myChart = new Chart(ctx, config);
                  
                  $('#exportTheseRunsToCSV').on('click', function() {
                      // something like myChart.getVisibleDataPoints() ???
                      console.log(chart)
                      console.log(chart.data.datasets)
                  });
                  

                  必须有一些内部 API 调用来获取可见点,因为我还有一个函数可以将当前可见点导出到 PNG,并且只获取当前在画布上绘制的内容:

                  There has to be some internal API call to get the visible points, as I also have a function to export the current visible points to PNG and that only grabs what is currently drawn on the canvas:

                  <a id="exportTheseRuns" class="text-white" href="#" download="image.png" download><i class="fas fa-download"></i> Export to PNG</a>
                  
                  $('#exportTheseRuns').on('click', function() {
                      $('#exportTheseRuns').attr('href', myChart.toBase64Image());
                  })
                  

                  .toBase64Image() 函数似乎在内部完成了我正在寻找的工作,因为它只会捕获可见点,但随后它返回一个 Base64 URI,我不能用于我的arrayToCSV 函数.

                  The function .toBase64Image() seems like it internally does what I am looking for, as it will only capture visible points, but then it returns a Base64 URI which I can't use for my arrayToCSV function.

                  推荐答案

                  图表对象包含minIndexmaxIndex属性,可用于slice 的数据集可见的价值.

                  The chart object contains minIndex and maxIndex properties that can be used to slice the dataset for the visible values.

                  这是一个片段,展示了如何使用 插件提供的函数 onPanCompleteonZoomComplete 在平移或缩放图表后输出可见值:

                  Here's a snippet showing how to use the plugin-provided functions onPanComplete and onZoomComplete to output the visible values after panning or zooming the chart:

                  function getVisibleValues({
                    chart
                  }) {
                    let x = chart.scales["x-axis-0"];
                  
                    document.getElementById("vv").innerText = JSON.stringify(chart.data.datasets[0].data.slice(x.minIndex, x.maxIndex + 1));
                  }
                  
                  new Chart(document.getElementById("chart"), {
                    type: "line",
                    data: {
                      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
                      datasets: [{
                        data: [0, 1, 2, 4, 8, 16, 32, 64, 128, 256]
                      }]
                    },
                    options: {
                      maintainAspectRatio: false,
                      scales: {
                        xAxes: [{
                          ticks: {
                            min: 'c',
                            max: 'h'
                          }
                        }]
                      },
                      plugins: {
                        zoom: {
                          pan: {
                            enabled: true,
                            mode: 'x',
                            onPanComplete: getVisibleValues
                          },
                          zoom: {
                            enabled: true,
                            mode: 'x',
                            onZoomComplete: getVisibleValues
                          }
                        }
                      }
                    }
                  });

                  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
                  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
                  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
                  <canvas id="chart" style="max-height:125px"></canvas>
                  <p>
                    Visible values: <span id="vv"></span>
                  </p>

                  这篇关于Chart.js 获取图表上当前可见点的数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:Chart.js - 根据某个 y 值绘制水平线 下一篇:chartjs 时间笛卡尔轴适配器和日期库设置

                  相关文章

                1. <i id='UqlJF'><tr id='UqlJF'><dt id='UqlJF'><q id='UqlJF'><span id='UqlJF'><b id='UqlJF'><form id='UqlJF'><ins id='UqlJF'></ins><ul id='UqlJF'></ul><sub id='UqlJF'></sub></form><legend id='UqlJF'></legend><bdo id='UqlJF'><pre id='UqlJF'><center id='UqlJF'></center></pre></bdo></b><th id='UqlJF'></th></span></q></dt></tr></i><div id='UqlJF'><tfoot id='UqlJF'></tfoot><dl id='UqlJF'><fieldset id='UqlJF'></fieldset></dl></div>

                    <legend id='UqlJF'><style id='UqlJF'><dir id='UqlJF'><q id='UqlJF'></q></dir></style></legend>
                      <bdo id='UqlJF'></bdo><ul id='UqlJF'></ul>

                    1. <tfoot id='UqlJF'></tfoot>

                      <small id='UqlJF'></small><noframes id='UqlJF'>