Javascript 如何不从在线csv中绘制不需要的信息_Javascript_Html_Chart.js

Javascript 如何不从在线csv中绘制不需要的信息

javascript html chart.js

Javascript 如何不从在线csv中绘制不需要的信息,javascript,html,chart.js,Javascript,Html,Chart.js,是我需要使用的数据，我无法下载，它必须来自服务器，并在我的网站上绘制图表。如你所见，我有两个来源GCAG和GISTEMP。我必须绘制任意一个图形，但我不知道如何选择要绘制的图形，因此当我绘制数据时，我会同时获得这两个（）。我寻找是否可以临时存储和清理数据，然后将其绘制成图表，但没有发现任何有用的东西。我想做的只是绘制从源GISTEMP开始的平均值和年份 <!DOCTYPE html> <html lang="en"> <head> <title>T

是我需要使用的数据，我无法下载，它必须来自服务器，并在我的网站上绘制图表。如你所见，我有两个来源GCAG和GISTEMP。我必须绘制任意一个图形，但我不知道如何选择要绘制的图形，因此当我绘制数据时，我会同时获得这两个（）。我寻找是否可以临时存储和清理数据，然后将其绘制成图表，但没有发现任何有用的东西。我想做的只是绘制从源GISTEMP开始的平均值和年份

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<script src="script.js"></script>


</head>

<body>
<section>
<div class='chartStyle'>
    <canvas id="GlobalTempGraph"></canvas>
</div>


</section>

</body>
</html>

听不懂你的问题。你只想一次绘制一组数据，并用某种方式在它们之间切换？@mkaatman我只想绘制GISTEMP，但如果有一种方式在它们之间切换，那就更好了。因此，你不需要直接指向CSV，而需要手动加载它并在将其发送到图表之前对其进行过滤。

var GlobalTempConfig = {

   type: 'line',

   plugins: [ChartDataSource],

   options: {
   legend: {
           display: false,
           reverse: true
         },  
     scales: {
         xAxes: [{
             scaleLabel: {
                 display: true,
                 labelString: 'Year',
             }

         }],
         yAxes: [{
             id: 'Temperature',
             gridLines: {
                 drawOnChartArea: false
             },
             scaleLabel: {
                 display: true,
                 labelString: 'Temperature',
             }
         }],

     },

     plugins: {
     datasource: {

         type: 'csv',
         url: 'https://pkgstore.datahub.io/core/global-temp/annual_csv/data/a26b154688b061cdd04f1df36e4408be/annual_csv.csv', //url of csv
         rowMapping: 'datapoint',
         datapointLabels: false,
         datapointLabelMapping: {
           _dataset: '_dataset',
           _index: 'x',
           x: '',
           y: ''}
   }
 }
   }

};


function effectsGraph(){
   var ctx = document.getElementById('GlobalTempGraph').getContext('2d');
   window.myChart = new Chart(ctx, GlobalTempConfig);
}

window.addEventListener("load", effectsGraph, false);