时间戳

首页 > 解决方案 > 使用 jquery 在画布上绘制绘图

html - 使用 jquery 在画布上绘制绘图

问题描述

真的很感激下面的任何帮助。我对 jquery/html 的了解非常有限。我试图从其他人启动的项目中找出这个问题。

本质上，我在 HTML 中创建了一个“画布”标签，目的是在单击另一个 HTML 组件时在其上添加折线图。

下面是我的 HTML 代码

                <body>
                    <div id = "myModal" class="modal">
                        <div class="modalContent">
                            <span class = "close"> &times; </span>
                            <canvas id="data_chart"></canvas>
                        </div>
                    </div>
                </body>

这是我的jQuery代码

            $(document).on('click', "#country_data_detail_table tbody tr", function(e){
                $("*[id='myModal']").css('display', 'block');
                renderChart();
            });

function renderChart() {

                  var ctx = $('canvas[id="data_chart"]')[0].getContext('2d');
                  //===========================
                  var len = data_obj["trend"]["x"].length;
                  var trend_data = []

                  for (var i=0; i<len; i++){
                      var d = new Date(data_obj["trend"]["x"][i]);
                      var t = {"date": d, "value": data_obj["trend"]["y"][i]};
                      trend_data.push(t)};


                  var chart = am4core.create(ctx, am4charts.XYChart);
                  chart.data=trend_data;
                  var dateAxis_line = chart.xAxes.push(new am4charts.DateAxis());

                  // Create value axis
                  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                  var series = chart.series.push(new am4charts.LineSeries());
}

但是，当画布对象出现时（我可以确认，我在它周围添加了一个出现的边框），图表没有呈现。

我在stackoverflow上进行了广泛搜索，发现这个问题与我的非常相似，但我似乎无法成功适应它。 Chart.js 模态窗口

非常感谢您提供的任何帮助。

标签： htmljqueryamcharts

解决方案

AmCharts 使用 SVG，因此您不能将其放在画布元素中。将其更改为 div，例如<div id="data_chart"></div>并删除与画布相关的代码。

var chart = am4core.create("data_chart", am4charts.XYChart);

这假设您的图表代码的其余部分设置正确（您的数据字段在您的 renderChart 函数的其余部分中分配给您的系列）。

推荐阅读