javascript - 2个canvasjs图表在一页的问题，-6ren

javascript - 2个canvasjs图表在一页的问题，

转载作者：行者123 更新时间：2023-11-28 19:09:24

24

4

我尝试将 2 个 Canvasjs 图表放在一个 html 页面中。我已经包含了jquery，当我只放置一个图表div时它就可以工作，一旦我添加第二个图表，它就会显示错误，只显示一张图表。

我想在一个页面中显示 2 个或更多图表，可以吗？

这是我的代码。谢谢

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript" src="canvas/js/jquery.canvasjs.min.js"></script>
  
  <!FIRST JAVASCRIPT>
  <script type="text/javascript">
      window.onload = function () {
          var chart = new CanvasJS.Chart("chartContainer", {
              data: [
              {
                  type: "column",
                  dataPoints: [
                  { x: 10, y: 10 },
                  { x: 20, y: 15 },
                  { x: 30, y: 25 },
                  { x: 40, y: 30 },
                  { x: 50, y: 28 }
                  ]
              }
              ]
          });
 
          chart.render();
      }
  </script>
  <!SECOND JAVASCRIPT>
  <script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer2");

    chart.options.axisY = { prefix: "$", suffix: "K" };
    chart.options.title = { text: "Fruits sold in First & Second Quarter" };

    var series1 = { //dataSeries - first quarter
        type: "column",
        name: "First Quarter",
        showInLegend: true
    };

    var series2 = { //dataSeries - second quarter
        type: "column",
        name: "Second Quarter",
        showInLegend: true
    };

    chart.options.data = [];
    chart.options.data.push(series1);
    chart.options.data.push(series2);


    series1.dataPoints = [
            { label: "banana", y: 18 },
            { label: "orange", y: 29 },
            { label: "apple", y: 40 },
            { label: "mango", y: 34 },
            { label: "grape", y: 24 }
    ];

    series2.dataPoints = [
        { label: "banana", y: 23 },
        { label: "orange", y: 33 },
        { label: "apple", y: 48 },
        { label: "mango", y: 37 },
        { label: "grape", y: 20 }
    ];

    chart.render();
}
</script>
  
  
  
  
</head>
 
<body>
  <!FIRST CHART SHOW>
  <div id="chartContainer1" style="height: 500px; width: 50%;"></div>
  <!SECOND CHART SHOW>
  <div id="chartContainer2" style="height: 500px; width: 50%;"></div>
  
  
</body>
</html>

最佳答案

首先，您不需要两个 window.onload 函数。第二个 onload 函数将覆盖第一个 onload 函数。因此，只需拥有一个并将两个图表代码都包含在其中一个中即可。

此外，创建的第一个图表需要一个 id 为 chartContainer 的元素，该元素在 DOM 中不存在。将其替换为 chartContainer1。

替换

var chart = new CanvasJS.Chart("chartContainer", {...});

与

var chart = new CanvasJS.Chart("chartContainer1", {...});

两个图表都使用两个变量，而不是使用一个变量chart，这样该变量就不会被覆盖。像这样的事情

window.onload = function(){
  var chart1 = new CanvasJS.Chart("chartContainer1", {
    data: [{
      type: "column",
      dataPoints: [{
        x: 10,
        y: 10
      }, {
        x: 20,
        y: 15
      }, {
        x: 30,
        y: 25
      }, {
        x: 40,
        y: 30
      }, {
        x: 50,
        y: 28
      }]
    }]
  });

  chart1.render();

  var chart2 = new CanvasJS.Chart("chartContainer2");

  chart2.options.axisY = {
    prefix: "$",
    suffix: "K"
  };
  chart2.options.title = {
    text: "Fruits sold in First & Second Quarter"
  };

  var series1 = { //dataSeries - first quarter
    type: "column",
    name: "First Quarter",
    showInLegend: true
  };

  var series2 = { //dataSeries - second quarter
    type: "column",
    name: "Second Quarter",
    showInLegend: true
  };

  chart2.options.data = [];
  chart2.options.data.push(series1);
  chart2.options.data.push(series2);


  series1.dataPoints = [{
    label: "banana",
    y: 18
  }, {
    label: "orange",
    y: 29
  }, {
    label: "apple",
    y: 40
  }, {
    label: "mango",
    y: 34
  }, {
    label: "grape",
    y: 24
  }];

  series2.dataPoints = [{
    label: "banana",
    y: 23
  }, {
    label: "orange",
    y: 33
  }, {
    label: "apple",
    y: 48
  }, {
    label: "mango",
    y: 37
  }, {
    label: "grape",
    y: 20
  }];

  chart2.render();
};

这是一个演示 http://jsbin.com/rocusuhevo/edit?html,js,output

关于javascript - 2个canvasjs图表在一页的问题，，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31016330/

24

4

0

文章推荐： iphone - 如何以编程方式退出 MPMoviePlayerController？

文章推荐： ios - 具有 5-6 个段的 UISegmentedControl

文章推荐： ios - 调用 Objective-C 方法

javascript - CanvasJS 折线图生成？
我正忙着尝试制作一个用于实时数据显示的 javascript 图表。我找到了这个 CanvasJS API。默认代码 specific chart他们的网页上的内容很好，但是当然，他们获取数据的部分，
javascript - 图表未正确渲染，canvasjs
我正在尝试使用 canvasJS 渲染两个动态图表，第一个图表正确渲染，实际上第二个图表正确填充，请参阅 inspect element 图像，但它没有显示在页面上。这是界面，只显示一张图表这是检
javascript - canvasjs:是否有可能回到过去？
我正在尝试创建一个 dynamic chart in canvasjs 。如果数据点高于某个定义值，图表就会发生变化。我想知道您是否可以回到过去，以便可以滚动浏览动态图表。亲切的问候，肯最佳答案
javascript - CanvasJs 创建了多个图表但只渲染了一个图表
我想根据 JSON 数组中的 N 个对象动态创建 CanvasJS 图表。如果 JSON 数组有 3 个对象，则网页应该能够显示 3 个图表。通过id“spectraContainers”，我
javascript - CanvasJS 实时折线图
我目前正忙于为老年患者建立商业智能环境。老年人戴着手环来测量加速度和心率。心率部分将是一个静态图表(不是实时图表)，我已经完成了。整个环境实际上已经完成了。实时加速度折线图除外。所以我想使用Can
javascript - CanvasJs，更新数据
我想在图表中显示一些数据。大小约为 200k 数据点 x16 - 这是堆叠值。我希望这个库能够及时渲染这些数据。数组看起来像:[16][250000]，其中外部数组是堆叠值，内部数组保存数据。 [n
javascript - CanvasJS - 根据用户输入渲染时间线图表
我正在尝试修改 Rendering a Chart from User Input for CanvasJS 的示例。我希望 x 轴成为时间线。我觉得我走在正确的轨道上，但现在陷入了设置正确的时间输入
javascript - CanvasJS 无法正确渲染图表
我使用以下代码在 CanvasJS 中渲染 OHLC 图表: var candleData = []; var chart = new CanvasJS.Chart("chartContainer"
javascript - canvasJS 通过直接传递一个对象来插入新的数据点
所以，我得到一个对象，其中包含我想以这种形式(通过 Json)以下列形式绘制的数据: chartData(GraphData.year, GraphData.month, GraphData.day
javascript - CanvasJS 中的不间断空格
我目前正在从事一个涉及 Bootstrap 和 CanvasJS 的元素，制作圆环图。是否可以将类(class)标题和/或图例文本设为不间断文本？我一直在尝试包含但它似乎不起作用。结果是“Le
javascript - CanvasJS 图形倾斜直到缩放级别改变？
window.onload = function() { var chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: f
javascript - Canvasjs:根据屏幕尺寸不同设置
我正在使用 CanvasJs对于条形图，但我想根据屏幕大小进行不同的设置。例如，对于小于 480 像素的屏幕，我想在 axisY 上完全隐藏标签。如何做到这一点？似乎无法使用媒体查询和css 来自
javascript - CanvasJS，为图表设置用户输入标题的问题
我目前面临为 canvasJS 图表创建用户输入标题的问题。我目前正在浏览 canvasJS 上的教程，我认为创建一个面向用户输入的饼图会成为一个简洁的小项目。我目前面临的问题是试图让从 HTML
javascript - CanvasJS 多图表
我正在使用一个名为 CanvasJS 的安静漂亮的小 js 工具。它工作得很好，直到我需要它一次显示多个图表。现在它只显示最后一个条目。其他一切都被忽略了。我几乎尝试了所有方法，但就是想不通为什么它
javascript - Canvasjs 图表中的渲染数据
我正在使用 CanvasJs 渲染图表，它现在工作正常。虽然我不确定，但它是否以适当的方式在图表中显示数据。这是我正在使用的逻辑: var query = from c in GetProducts(
javascript - CanvasJS 图表上的交互式垂直线注释
我正在尝试以类似于 dygraphs 功能( example here )的方式向我的 CanvasJS 图表添加注释，但尚未找到方法。我见过一个例子，他们用图像( here )替换了一个点，但它并不
javascript - CanvasJS 图表不显示
我正在尝试创建一个条形图，其中包含 2009 年至 2015 年毛里求斯大学指定专业的在校学生的数据。我正在使用下面的 Javascript，console.log(data) 显示图表已呈现。但是，
javascript - canvasJS 图表无法正确渲染
我正在尝试使用 canvasJS 渲染多线图，但它没有按预期工作。这是我的drawChart函数 function drawChart(obj, placeholder){ var dataPoin
javascript - CanvasJS 和多个饼图。
我必须为网站创建饼图。在我看来，我无法根据我需要的数量动态渲染饼图。最多我必须渲染 28。所以，我想我必须输入 window.onload = function () { var chart
javascript - canvasjs，使用可变数据/图例创建图表
我正在尝试使用预先确定的数据(也称为来自数据库)在canvasjs中创建饼图。在 Canvasjs 方面，有一个有用的教程可以将多个数据放入图表中(使用弱类型数组)，但我不知道如何为图例执行此操作。我

首页

博学

6Ren·AI

商城

javascript - 2个canvasjs图表在一页的问题，