我最近开始在我的项目中使用amchart.从有AMchart经验的任何人那里寻求帮助.
我有一个数据集,假设在amchart的平滑线图上显示两个系列.我设法让它显示2系列,但这两个系列不共享相同的x轴.
所以任何想法如何让它共享相同的x轴.
我已附上以下代码.在图片中,有一行json,由我的代码中的函数load_dashboard_leads()返回.
<script>
var chart;
var graph;
var leadsGrowthData = <?PHP echo load_dashboard_leads();?>
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = leadsGrowthData;
chart.marginLeft = 10;
chart.categoryField = "month";
chart.dataDateFormat = "MMMM";
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "MM"; // our data is yearly, so we set minPeriod to YYYY
categoryAxis.dashLength = 3;
categoryAxis.minorGridEnabled = true;
categoryAxis.minorGridAlpha = 0.1;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.inside = true;
valueAxis.dashLength = 3;
chart.addValueAxis(valueAxis);
// GRAPH
graph = new AmCharts.AmGraph();
graph.type = "smoothedLine"; // this line makes the graph smoothed line.
graph.lineColor = "#d1655d";
graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
graph.bullet = "round";
graph.bulletSize = 8;
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.valueField = "lead";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
chart.addGraph(graph);
// Customer GRAPH
graph2 = new AmCharts.AmGraph();
graph2.type = "smoothedLine"; // this line makes the graph smoothed line.
graph2.lineColor = "#225F6A";
graph2.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
graph2.bullet = "round";
graph2.bulletSize = 8;
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderAlpha = 1;
graph2.bulletBorderThickness = 2;
graph2.lineThickness = 2;
graph2.valueField = "customer";
graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
chart.addGraph(graph2);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
// chartCursor.categoryBalloonDateFormat = "YYYY";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
chart.creditsPosition = "bottom-right";
// WRITE
chart.write("leadsgrowth");
});
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
var monthNames = ["January", "February", "march", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var d = new Date();
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToCategoryValues(monthNames[d.getMonth()], monthNames[d.getMonth()-12]);
}
</script><?PHP echo load_dashboard_leads();?>
<div id="leadsgrowth" style="width:100%; height:400px;"></div>
解决方法:
强烈建议您从AmCharts网站的包中开始项目并下载准备离线模式的样本…
var durationGraph1 = new AmCharts.AmGraph();
durationGraph1.id = "g1";
durationGraph1.title = "g1";
durationGraph1.valueField = "value1";
chart.addGraph(durationGraph1);
var durationGraph2 = new AmCharts.AmGraph();
durationGraph2.id = "g2";
durationGraph2.title = "g2";
durationGraph2.valueField = "value2";
chart.addGraph(durationGraph2);
然后使用:
chartData.push( {
date: d3,
date2: strdate ,
value1: distance,
value2: distance2
} );
如果你想要动画,你必须设置:
.amcharts-graph-g2 {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/; /* fixes IE prob */
stroke-dashoffset: 0 \0/; /* fixes IE prob */
-webkit-animation: am-draw 40s;
animation: am-draw 40s;
}
.amcharts-graph-g22 {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/; /* fixes IE prob */
stroke-dashoffset: 0 \0/; /* fixes IE prob */
-webkit-animation: am-draw 40s;
animation: am-draw 40s;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。