当前位置: 首页 > 知识库问答 >
问题:

图表js加载新数据

那绪
2023-03-14

我试图加载新数据(隐藏特定的图形),我试图破坏()函数像这里,但它不工作,我不知道我错过了什么。

我想加载一个数据(两个),但我想选择哪一个可见。

HTML

<canvas id="linechart"></canvas>
<div>
  <a id="current">Current</a>
  <a id="forecast">Forecast</a>
</div>

JavaScript

$(document).ready(function(){
    var canvas = document.getElementById('linechart');
    var ctx = canvas.getContext('2d');
    var current = [800, 1350, 1400, 1600, 2600, 3100];
    var forecast = [400, 1050, 1200, 1300, 1800, 2400];
    var data = {
      labels: ["2", "4", "8", "12", "16", "20"],
      pointDotRadius: 0,
      pointRadius: 0,
      pointBorderWidth : 0,
      pointHitRadius: 0,
      datasets: [
      {
        label: "current",
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "#7bc775",
        pointColor: "#7bc775",
        data: current,
      },
      {
        label: "forecast",
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "#fed477",
        pointColor: "#fed477",
        data: forecast,
      }]
    };
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: data
    });
    var step  = 800;
    var max   = 3200;
    var start = 0;
    window.myObjBar = new Chart(ctx).Line(data, {
      scaleOverride: true,
      scaleSteps: Math.ceil((max-start)/step),
      scaleStepWidth: step,
      scaleStartValue: start,
      responsive : true
    });
    $('#current').click(function(){
      current = [];
      if(myLineChart!== null){
        myLineChart.destroy();
        myLineChart = new Chart(ctx, {
          type: 'line',
          data: data
        });
      }
    });
  });

小提琴连杆

共有1个答案

卢嘉誉
2023-03-14

我使用最新版本的图表找到了解决您问题的方法。js

使用销毁和存储数组中的数据。当您单击控件时,它会破坏图表并用选定的数据重建一个新的图表

var mychart = new Chart(ctx,config);
$('.selector').click(function(){
 data.datasets = [datasets[$(this).data('index')]];
 if(mychart!== null){
      mychart.destroy();
      mychart = new Chart(ctx, config);
 }
 });

请参见此处更新的小提琴:https://jsfiddle.net/3563ko2t/6/

 类似资料:
  • 问题内容: 我正在尝试使用ng-repeat创建图表(使用Chart.js Lib)。 编辑:plnkr HTML: JS: 而且我收到以下错误: 请帮忙。 问题答案: 直接从View分配范围变量,例如。 在向指令提供数据和标签时,请勿使用内部污染指令。因为chart.js实现基于孤立的范围 的HTML 这可以为您提供帮助。谢谢。 更新1: 实际上,您错过了几件事。 您代码中的更改是 将Wrap

  • 我看过很多关于如何在chart.js中添加数据的教程,但都是针对单个图表的。 我使用chartjs创建多个图表(每个图表都有自己的画布和唯一的ID)。例如:图表1位于id=“c1”的画布中,图表2位于id=“c2”的画布中。如何选择图表1并添加新数据?

  • 问题内容: 我正在尝试通过JSON基于页面其他位置的按钮单击来重新加载Highcharts图表的数据。最初,我想显示一组默认数据(按类别支出),然后根据用户输入(例如按月支出)加载新数据。我想到的最简单的从服务器输出JSON的方法是将GET请求传递到PHP页面,例如 $ .get(’/ dough / includes / live-chart.php?mode = month’ ,检索此信息按钮

  • 问题内容: 我在一个选项卡中有一个数据表,该表是从索引方法上的控制器发送的数据中加载的。 我有加载数据表的视图 然后在加载页面时在javascript中加载数据表 我也有删除功能。如何在不重新加载页面的情况下重新加载数据(使用Ajax从控制器再次获取数据)? 问题答案:

  • 我想在图表中添加一个新数据,但浏览器在调用我的“add”函数时抛出一个错误,上面写着“UncaughtTypeError:undefined不是一个函数”。 图表对象似乎不识别“AddData”函数,但我不知道如何解决它。在文档中显示此函数对我来说无法正常工作。 .addData(valuesArray,label)在图表实例上调用addData(valuesArray,label),传递每个数据