使用 jquery 在 canvas 上画一个图
Draw a plot on top of a canvas using jquery
非常感谢对以下内容的任何帮助。我对 jquery/html 的了解非常有限。我试图从其他人启动的项目中找出这个问题。
基本上我在 HTML 中创建了一个“canvas”标签,目的是在单击另一个 HTML 组件时在其上添加折线图。
下面是我的HTML代码
<body>
<div id = "myModal" class="modal">
<div class="modalContent">
<span class = "close"> × </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());
}
但是,虽然 canvas 对象出现(我可以确认,因为我在它周围添加了一个出现的边框),但图表没有呈现。
我在Whosebug上进行了广泛的搜索,发现这个问题与我的非常相似,但我似乎无法成功适应它。
非常感谢您提供的任何帮助。
AmCharts 使用 SVG,因此您不能将其放在 canvas 元素中。将其更改为 div,例如<div id="data_chart"></div>
并删除与 canvas 相关的代码。
var chart = am4core.create("data_chart", am4charts.XYChart);
这假设您的图表代码的其余部分设置正确(您的数据字段已分配给您在 renderChart 函数的其余部分中的系列)。
非常感谢对以下内容的任何帮助。我对 jquery/html 的了解非常有限。我试图从其他人启动的项目中找出这个问题。
基本上我在 HTML 中创建了一个“canvas”标签,目的是在单击另一个 HTML 组件时在其上添加折线图。
下面是我的HTML代码
<body>
<div id = "myModal" class="modal">
<div class="modalContent">
<span class = "close"> × </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());
}
但是,虽然 canvas 对象出现(我可以确认,因为我在它周围添加了一个出现的边框),但图表没有呈现。
我在Whosebug上进行了广泛的搜索,发现这个问题与我的非常相似,但我似乎无法成功适应它。
非常感谢您提供的任何帮助。
AmCharts 使用 SVG,因此您不能将其放在 canvas 元素中。将其更改为 div,例如<div id="data_chart"></div>
并删除与 canvas 相关的代码。
var chart = am4core.create("data_chart", am4charts.XYChart);
这假设您的图表代码的其余部分设置正确(您的数据字段已分配给您在 renderChart 函数的其余部分中的系列)。