带有Amcharts的动态数据集
我试图让Amcharts动态渲染我的图表。
您可以在此地址查看主要自定义条形图：
https://karmacover.com/app/template-dashboard.php
我有一个var存储我的url回调：
var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';
在前端，我有一个下拉列表，我想选择图表数据集类型并动态渲染：
<span id="abc123" class="ic dropdownArrowWhite"></span>
<div class="defaultDropdown" id="defaultDropdownGraph">
<div class="submenu">
<div class="edit chartType">
<a id="topUpCycle" class="active">Top-up Cycle <span id="topUpCycleSpan" class="ic tickGreen"></span></a>
<a id="calendarMonth">Calendar Month <span id="calendarMonthSpan" class="ic tickGreen"></a>
<a id="calendarYear">Calendar Year <span id="calendarYearSpan" class="ic tickGreen"></a>
<a id="financialYear">Financial Year <span id="financialYearSpan" class="ic tickGreen"></a>
</div>
</div>
</div>
并且所选选项会更改网址的值并调用绘图功能：
$('#topUpCycle').click(function(){
var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';
drawgraphs();
});
我可以看到触发器正在工作并使用更改的url触发绘制功能，但没有任何反应：
我希望你们能真正帮助我。非常感谢提前！ ：）
如果您想查看（警告，大量自定义代码），这是完整的js文件：
var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';
$(document).ready(function() {
drawgraphs();
$("#calendarMonthSpan").hide();
$("#calendarYearSpan").hide();
$("#financialYearSpan").hide();
$('#topUpCycle').click(function(){
console.log('clicked Top-Up Cycle');
//Not very beautifully coded
//remove active class on others
$("#calendarMonth").removeClass("active");
$("#calendarYear").removeClass("active");
$("#financialYear").removeClass("active");
// Hide the other spans
$("#calendarMonthSpan").hide();
$("#calendarYearSpan").hide();
$("#financialYearSpan").hide();
//add active class for this option
$("#topUpCycle").addClass("active");
$("#topUpCycleSpan").show();
var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';
console.log(jsonSelected);
drawgraphs();
});
$('#calendarMonth').click(function(){
console.log('clicked Calendar Month');
//Not very beautifully coded
//remove active class on others
$("#topUpCycle").removeClass("active");
$("#calendarYear").removeClass("active");
$("#financialYear").removeClass("active");
// Hide the other spans
$("#topUpCycleSpan").hide();
$("#calendarYearSpan").hide();
$("#financialYearSpan").hide();
//add active class for this option
$("#calendarMonth").addClass("active");
$("#calendarMonthSpan").show();
var jsonSelected = 'https://www.karmacover.com/app/jsonp-monthly.php?callback=?';
console.log(jsonSelected);
drawgraphs();
});
$('#calendarYear').click(function(){
console.log('clicked calendar year');
//Not very beautifully
//remove active class on others
$("#topUpCycle").removeClass("active");
$("#calendarMonth").removeClass("active");
$("#financialYear").removeClass("active");
// Hide the other spans
$("#topUpCycleSpan").hide();
$("#calendarMonthSpan").hide();
$("#financialYearSpan").hide();
//add active class for this option
$("#calendarYear").addClass("active");
$("#calendarYearSpan").show();
var jsonSelected = 'https://www.karmacover.com/app/jsonp-yearly.php?callback=?';
console.log(jsonSelected);
drawgraphs();
});
$('#financialYear').click(function(){
console.log('clicked Financial Year');
//Not very beautifully coded
//remove active class on others
$("#topUpCycle").removeClass("active");
$("#calendarMonth").removeClass("active");
$("#calendarYear").removeClass("active");
// Hide the other spans
$("#topUpCycleSpan").hide();
$("#calendarMonthSpan").hide();
$("#calendarYearSpan").hide();
//add active class for this option
$("#financialYear").addClass("active");
$("#financialYearSpan").show();
var jsonSelected = 'https://www.karmacover.com/app/jsonp-financial-year.php?callback=?';
console.log(jsonSelected);
drawgraphs();
});
});
function drawgraphs() {
console.log('Function is called');
$.getJSON(jsonSelected, function(data) {
var chartData = data[0];
var chartData2 = data[1];
var chartDataRight = data[2];
var chart,chart1,chart2;
chart2= new AmCharts.AmSerialChart();
chart1 = new AmCharts.AmSerialChart();
var chart2_start =0;
var chart1_start = 6;
var current_start=0,current_diff=11;
var flag=false;
var position,scroll_width;
var column_width;
var col_space;
var monthly;
var monthly_str;
var month_array = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
"Sep","Oct","Nov","Dec"];
var today_date = new Date();
for( i =0; i<chartDataRight.length; i++)
{
chartDataRight[i].baseOffset = 0;
var month =chartDataRight[i].date.split("\n");
month = month[1];
if(chartDataRight[i].year == today_date.getFullYear() && month ==month_array[today_date.getMonth()])
{
current_start=i;
}
chartDataRight[i].color = ["#FFFFFF","#cccccc"];
}
for( i =0; i<current_start; i++)
{
chartDataRight[i].color = ["#178539","#1faf4b"];
}
function drawHeader(startIndex,diff){
var str=chartDataRight[startIndex].year;
var c = document.getElementById("mycanvas");
var c1 = document.getElementById("mycanvas1");
var c2 = document.getElementById("mycanvas2");
c.width = document.getElementById("chartdiv").offsetWidth - 30;
c1.width = document.getElementById("chartdiv").offsetWidth - 30;
c2.width = document.getElementById("chartdiv").offsetWidth - 30;
var ctx = c.getContext("2d");
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
var canvas_width = c.width;
col_space = chart2.columnSpacing;
column_width = (parseInt(canvas_width) - parseInt(col_space))/(current_diff+1);
var str_width = ctx.measureText(str).width;
var font_size = 12;
var offset = (column_width-col_space-str_width) /2;
ctx.clearRect(0,0,800,50);
ctx.font = font_size+"px Times New Roman";
ctx.fillStyle="#b6b6b6";
ctx.strokeStyle="#6d6d6d";
ctx.fillText(str, offset, 25);
if(chartDataRight[startIndex].monthly == 1)
{
monthly = 1;
monthly_str = "Monthly"
}else{
monthly = 0;
monthly_str = "Fortnightly";
}
ctx2.clearRect(0,0,800,50);
ctx2.font = font_size+"px Times New Roman";
ctx2.fillStyle="#b6b6b6";
ctx2.strokeStyle="#6d6d6d";
str_width1 = ctx2.measureText(monthly_str).width;
var offset1 = (column_width-col_space-str_width1) /2;
var mf_start =0;
for(var i=startIndex; i<startIndex+current_diff; i++)
{
if((chartDataRight[i].year !=str ) && (i-startIndex >= 0))
{
ctx.beginPath();
ctx.moveTo(column_width-col_space,19);
var base_gap;
if(chartDataRight[i].monthly == 1)
{
base_gap = 0;
}
else
{
base_gap = 8;
}
ctx.lineTo((column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset-base_gap,19);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo((column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset-base_gap,13);
ctx.lineTo((column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset-base_gap,25);
ctx.closePath();
ctx.stroke();
ctx.fillText(chartDataRight[i].year,(column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset+col_space,25);
str = chartDataRight[i].year;
ctx.beginPath();
ctx.moveTo((column_width)*(i-startIndex+2)-chartDataRight[i].baseOffset-base_gap,19);
ctx.lineTo((column_width)*(current_diff+1)-2,19);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo((column_width)*(current_diff+1)-2,13);
ctx.lineTo((column_width)*(current_diff+1)-2,25);
ctx.closePath();
ctx.stroke();
}
if((chartDataRight[i].monthly != monthly ) && (i-startIndex >= 0))
{
drawFortnightLabel(ctx2,column_width,offset1,startIndex,i,mf_start);
if(current_diff==1)
{
ctx2.fillText(monthly_str, 0, 25);
ctx2.moveTo(column_width*(1)-offset1+15,19);
}
mf_start = i-startIndex;
//drawFortnightLabel(ctx2,column_width,offset1,startIndex,i,mf_start);
}
if(i==startIndex+current_diff-1)
{
drawFortnightLabel(ctx2,column_width,offset1,startIndex,startIndex+current_diff+1,mf_start);
}
// Styling of the columns
ctx1.fillStyle="#b6b6b6";
ctx1.strokeStyle="#6d6d6d";
ctx1.clearRect(0,0,800,50);
ctx1.font = font_size+"px Times New Roman";
ctx1.fillText("Previous",0,30);
ctx1.fillText("Upcoming",(column_width)*(current_diff+1)-ctx1.measureText("Upcoming").width,30);
ctx1.beginPath();
ctx1.moveTo(0,15);
ctx1.lineTo(0+(column_width)*(current_diff+1),15);
ctx1.closePath();
ctx1.stroke();
var step = (c1.width -col_space*2) / (chartDataRight.length - diff);
position = step * startIndex;
ctx1.beginPath();
ctx1.clearRect(position-4, 10,column_width-col_space*2+8,10)
roundRect(ctx1,position,10,column_width-col_space*2,10);
scroll_width = column_width-col_space*2;
ctx1.closePath();
var d = document.getElementById('left-border');
d.style.position = "absolute";
d.style.display = "none";
var chart_div = document.getElementById("chartdiv");
d.style.top = chart_div.offsetTop+50+'px';
d.style.height = chart_div.offsetHeight - 100 + "px";
d.style.left = parseInt(chart_div.offsetLeft)+parseInt(c1.width/2 + col_space+20)+'px';
}
}
function drawFortnightLabel(ctx2,column_width,offset1,startIndex,i,mf_start){
// if(mf_start ==0)
{
ctx2.beginPath();
if(mf_start ==0)
{
ctx2.fillText(monthly_str, 0, 25);
ctx2.moveTo(column_width*(mf_start+1)-offset1+15,19);
}else if(monthly_str=="Fortnightly")
{
ctx2.fillText(monthly_str, column_width*mf_start+offset1 + col_space, 25);
ctx2.moveTo(column_width*(mf_start+1)-offset1+15,19);
}
else{
ctx2.fillText(monthly_str, column_width*mf_start+offset1 + 6 + col_space, 25);
ctx2.moveTo(column_width*(mf_start+1)-offset1+chartDataRight[mf_start].baseOffset,19);
}
if((column_width)*(i-startIndex) > column_width*(mf_start+1)-offset1+11)
{
if((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset<column_width*(current_diff+1))
{
ctx2.lineTo((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset,19);
ctx2.closePath();
ctx2.stroke();
ctx2.beginPath();
ctx2.moveTo((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset,13);
ctx2.lineTo((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset,25);
}
else
{
ctx2.lineTo((column_width)*(current_diff+1),19);
ctx2.closePath();
ctx2.stroke();
ctx2.beginPath();
ctx2.moveTo((column_width)*(current_diff+1),13);
ctx2.lineTo((column_width)*(current_diff+1),25);
}
}
ctx2.closePath();
ctx2.stroke();
}
if(i<chartDataRight.length){
if(chartDataRight[i].monthly==1)
{
monthly_str = "Monthly";
}
else
{
monthly_str = "Fortnightly";
}
monthly = chartDataRight[i].monthly;
}
}
// Rounding columns angles
function roundRect(ctx, x, y, width, height) {
var radius =5;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
}
function drawChart() {
// The Doughnut chart
if(current_start+current_diff >= chartDataRight.length)
{
chart2.zoomToIndexes(chartDataRight.length -current_diff-1, chartDataRight.length);
}
// else
{
chart2.zoomToIndexes(current_start, current_start+current_diff);
}
}
AmCharts.ready(function () {
// The 30 days Doughnut chart
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.labelText="";
chart.valueField = "slice_value";
chart.titleField = "category"
chart.sequencedAnimation = true;
chart.colorField ="color";
chart.innerRadius = "60%";
chart.labelRadius = 15;
chart.addListener('rendered', function(event) {
// populate custom legend when chart renders
chart.customLegend = document.getElementById('legend');
legend.innerHTML = "";
for (var i in chart.chartData) {
var row = chart.chartData[i];
var color = chart.dataProvider[i].color;
legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" style="color: ' + "#777777" + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.title+'</div>';
}
});
// In case we need to style the modals
// chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
chart.angle = 0;
// WRITE
chart.write("mychartdiv");
// The last 12 months Doughnut chart
chart3 = new AmCharts.AmPieChart();
chart3.dataProvider = chartData2;
chart3.labelText="";
chart3.valueField = "slice_value";
chart3.titleField = "category"
chart3.sequencedAnimation = true;
chart3.colorField ="color";
chart3.innerRadius = "60%";
chart3.labelRadius = 15;
chart3.outlineThickness = 3;
chart3.addListener('rendered', function(event) {
// populate custom legend when chart renders
chart3.customLegend = document.getElementById('legend3');
legend3.innerHTML = "";
for (var i in chart.chartData) {
var row = chart.chartData[i];
var color = chart.dataProvider[i].color;
legend3.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" style="color: ' + "#777777" + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.title+'</div>';
}
});
// In case we need to style the modals
// chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
chart3.angle = 0;
// WRITE
chart3.write("mychartdiv3");
chart2.dataProvider = chartDataRight;
chart2.categoryField = "date";
chart2.zoomOutButtonImageSize = 0;
chart2.zoomOutText = "";
chart2.columWidth=0.4;
chart2.mouseWheelScrollEnabled=true;
chart2.panEventsEnabled = true;
var categoryAxis = chart2.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.color="#b6b6b6";
categoryAxis.gridPosition = "start";
categoryAxis.labelFunction = function(valueText, date, categoryAxis) {
return (valueText.slice(4,valueText.length));
}
// X Axis
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
valueAxis.axisAlpha = 0;
valueAxis.fillColor = "#000000";
valueAxis.inside = true;
valueAxis.labelsEnabled = false;
chart2.addValueAxis(valueAxis);
// column graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "bill_amount";
graph1.valueField = "bill_amount";
graph1.labelColorField = "strColor";
graph1.fontSize=11;
graph1.labelText="$[[value]]";
graph1.labelOffset=15;
graph1.labelPosition='inside';
graph1.labelRotation=-90;
graph1.fillColorsField="color";
graph1.cornerRadiusTop = 3;
graph1.lineAlpha = 0;
graph1.fillAlphas = 1;
chart2.addGraph(graph1);
// Step graph
graph = new AmCharts.AmGraph();
graph.type = "step";
graph.valueField = "step_amount";
graph.lineColor = "#ffb400";
graph.lineThickness =5;
chart2.addGraph(graph);
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "YYYY";
chartCursor.categoryBalloonEnabled = false;
chartCursor.zoomable=false;
chartCursor.pan=true;
chart2.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.autoGridCount=true;
chartScrollbar.graph = "g1";
chartScrollbar.scrollbarHeight =40;
chart2.creditsPosition = "bottom-right";
// WRITE
chart2.write("chartdiv");
// ZOOM
chart2.addListener("zoomed", handleZoom);
chart2.zoomToIndexes(current_start-Math.ceil(current_diff/2), current_start+Math.floor(current_diff/2));
});
function getxoffset(path_array){
var resultx=[], resulty=[];
var result=[];
var temp;
for(var i=0; i<path_array.length; i++)
{
temp = (path_array[i].split(","));
resultx[i]=temp[0];
resulty[i]=temp[1];
// console.log(i + "," + resultx[i]);
}
result.x = resultx;
result.y = resulty;
return result;
}
// And more I couldn't paste...
});
};
您可以在此处找到完整的js文件：https://karmacover.com/app/js/columns-chart.js
同样，我感谢您提供的任何帮助！
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？