如何在 php 中使用 amchart 绘制动态小时图
How to plot dynamic hourly graph with amchart in php
我正在尝试使用 amchart 绘制折线图，根据 amchart 文档绘制每小时折线图，这是正确的：
1. "date": "2012-01-01 01"
2. chart.dataDateFormat = "YYYY-MM-DD HH";
3. chart.categoryField = "date";
我按照相同的方法进行操作，但 x 轴仍然没有改变。enter image description here
var lineChartData = [
{
"date": "2012-01-01 01",
"negative": 80,
"neutral": 40,
"postitive": 60
},
{
"date": "2012-02-01 02",
"negative": 72,
"neutral": 20,
"postitive": 50
},
];
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChartData;
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD HH";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 30;
chart.marginBottom = 30;
chart.marginTop = 40;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
categoryAxis.inside = false;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0.5;
categoryAxis.fontSize = 9;
categoryAxis.axisColor = "rgba(255,255,255,0.8)";
categoryAxis.color = "rgba(255,255,255,0.8)";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 2;
valueAxis.gridColor = "rgba(255,255,255,0.8)";
valueAxis.gridAlpha = 0.2;
valueAxis.axisColor = "rgba(255,255,255,0.8)";
valueAxis.color = "rgba(255,255,255,0.8)";
valueAxis.axisAlpha = 0.5;
valueAxis.fontSize = 9;
chart.addValueAxis(valueAxis);
// members
var graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.valueField = "negative";
graph.lineColor = "#53d769";
graph.lineThickness = 3;
graph.bullet = "round";
//graph.bulletColor = "rgba(0,0,0,0.3)";
graph.bulletBorderColor = "#53d769";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 3;
graph.bulletSize = 6;
chart.addGraph(graph);
// orders
var graph1 = new AmCharts.AmGraph();
graph1.type = "smoothedLine";
graph1.valueField = "neutral";
graph1.lineColor = "#1c7dfa";
graph1.lineThickness = 3;
graph1.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph1.bulletBorderColor = "#1c7dfa";
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
graph1.bulletSize = 6;
chart.addGraph(graph1);
// orders
var graph2 = new AmCharts.AmGraph();
graph2.type = "smoothedLine";
graph2.valueField = "postitive";
graph2.lineColor = "#821908";
graph2.lineThickness = 3;
graph2.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph2.bulletBorderColor = "#821908";
graph2.bulletBorderAlpha = 1;
graph2.bulletBorderThickness = 3;
graph2.bulletSize = 6;
chart.addGraph(graph2);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chartCursor.categoryBalloonAlpha = 0.2;
chartCursor.cursorAlpha = 0.2;
chartCursor.cursorColor = 'rgba(255,255,255,.8)';
chartCursor.categoryBalloonEnabled = false;
// WRITE
chart.write("chartdiv");
});
您拥有的示例数据不是每小时一次，而是每月一次（加一小时，但在 amCharts 中，无论如何都是每月一次）。
AmCharts 根据您的类别轴 minPeriod 和当前缩放可见点之间的差异 level/time 来确定显示基于日期的数据的适当时间段。鉴于您的数据相隔一个月以上，它将使用下一个最高周期格式来适应可见周期格式。此格式在类别轴的 dateFormats 数组中定义，该数组设置为：
[{
"period": "fff",
"format": "JJ:NN:SS"
}, {
"period": "ss",
"format": "JJ:NN:SS"
}, {
"period": "mm",
"format": "JJ:NN"
}, {
"period": "hh",
"format": "JJ:NN"
}, {
"period": "DD",
"format": "MMM DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM DD"
}, {
"period": "YYYY",
"format": "YYYY"
}]
调整 MM、WW 和 DD 以在输出中包含小时数将为您提供所需的标签，但由于周期设置，amCharts 会将每个小时解释为午夜，因此您还需要设置 equalSpacing 为 true 以获得每个点的确切时间。
var lineChartData = [{
"date": "2012-01-01 01",
"negative": 80,
"neutral": 40,
"postitive": 60
},
{
"date": "2012-02-01 02",
"negative": 72,
"neutral": 20,
"postitive": 50
},
];
AmCharts.ready(function() {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChartData;
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD HH";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 30;
chart.marginBottom = 30;
chart.marginTop = 40;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
categoryAxis.equalSpacing = true;
categoryAxis.inside = false;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0.5;
categoryAxis.fontSize = 9;
categoryAxis.axisColor = "rgba(255,255,255,0.8)";
categoryAxis.color = "rgba(255,255,255,0.8)";
categoryAxis.dateFormats = [{
"period": "fff",
"format": "JJ:NN:SS"
}, {
"period": "ss",
"format": "JJ:NN:SS"
}, {
"period": "mm",
"format": "JJ:NN"
}, {
"period": "hh",
"format": "JJ:NN"
}, {
"period": "DD",
"format": "MMM DD\nHH:NN"
}, {
"period": "WW",
"format": "MMM DD\nHH:NN"
}, {
"period": "MM",
"format": "MMM DD\nHH:NN"
}, {
"period": "YYYY",
"format": "YYYY"
}];
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 2;
valueAxis.gridColor = "rgba(255,255,255,0.8)";
valueAxis.gridAlpha = 0.2;
valueAxis.axisColor = "rgba(255,255,255,0.8)";
valueAxis.color = "rgba(255,255,255,0.8)";
valueAxis.axisAlpha = 0.5;
valueAxis.fontSize = 9;
chart.addValueAxis(valueAxis);
// members
var graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.valueField = "negative";
graph.lineColor = "#53d769";
graph.lineThickness = 3;
graph.bullet = "round";
//graph.bulletColor = "rgba(0,0,0,0.3)";
graph.bulletBorderColor = "#53d769";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 3;
graph.bulletSize = 6;
chart.addGraph(graph);
// orders
var graph1 = new AmCharts.AmGraph();
graph1.type = "smoothedLine";
graph1.valueField = "neutral";
graph1.lineColor = "#1c7dfa";
graph1.lineThickness = 3;
graph1.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph1.bulletBorderColor = "#1c7dfa";
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
graph1.bulletSize = 6;
chart.addGraph(graph1);
// orders
var graph2 = new AmCharts.AmGraph();
graph2.type = "smoothedLine";
graph2.valueField = "postitive";
graph2.lineColor = "#821908";
graph2.lineThickness = 3;
graph2.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph2.bulletBorderColor = "#821908";
graph2.bulletBorderAlpha = 1;
graph2.bulletBorderThickness = 3;
graph2.bulletSize = 6;
chart.addGraph(graph2);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chartCursor.categoryBalloonAlpha = 0.2;
chartCursor.cursorAlpha = 0.2;
chartCursor.cursorColor = 'rgba(255,255,255,.8)';
chartCursor.categoryBalloonEnabled = false;
// WRITE
chart.write("chartdiv");
});
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 275px; background: #0c0c0c;"></div>
我正在尝试使用 amchart 绘制折线图，根据 amchart 文档绘制每小时折线图，这是正确的： 1. "date": "2012-01-01 01" 2. chart.dataDateFormat = "YYYY-MM-DD HH"; 3. chart.categoryField = "date";
我按照相同的方法进行操作，但 x 轴仍然没有改变。enter image description here
var lineChartData = [
{
"date": "2012-01-01 01",
"negative": 80,
"neutral": 40,
"postitive": 60
},
{
"date": "2012-02-01 02",
"negative": 72,
"neutral": 20,
"postitive": 50
},
];
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChartData;
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD HH";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 30;
chart.marginBottom = 30;
chart.marginTop = 40;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
categoryAxis.inside = false;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0.5;
categoryAxis.fontSize = 9;
categoryAxis.axisColor = "rgba(255,255,255,0.8)";
categoryAxis.color = "rgba(255,255,255,0.8)";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 2;
valueAxis.gridColor = "rgba(255,255,255,0.8)";
valueAxis.gridAlpha = 0.2;
valueAxis.axisColor = "rgba(255,255,255,0.8)";
valueAxis.color = "rgba(255,255,255,0.8)";
valueAxis.axisAlpha = 0.5;
valueAxis.fontSize = 9;
chart.addValueAxis(valueAxis);
// members
var graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.valueField = "negative";
graph.lineColor = "#53d769";
graph.lineThickness = 3;
graph.bullet = "round";
//graph.bulletColor = "rgba(0,0,0,0.3)";
graph.bulletBorderColor = "#53d769";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 3;
graph.bulletSize = 6;
chart.addGraph(graph);
// orders
var graph1 = new AmCharts.AmGraph();
graph1.type = "smoothedLine";
graph1.valueField = "neutral";
graph1.lineColor = "#1c7dfa";
graph1.lineThickness = 3;
graph1.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph1.bulletBorderColor = "#1c7dfa";
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
graph1.bulletSize = 6;
chart.addGraph(graph1);
// orders
var graph2 = new AmCharts.AmGraph();
graph2.type = "smoothedLine";
graph2.valueField = "postitive";
graph2.lineColor = "#821908";
graph2.lineThickness = 3;
graph2.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph2.bulletBorderColor = "#821908";
graph2.bulletBorderAlpha = 1;
graph2.bulletBorderThickness = 3;
graph2.bulletSize = 6;
chart.addGraph(graph2);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chartCursor.categoryBalloonAlpha = 0.2;
chartCursor.cursorAlpha = 0.2;
chartCursor.cursorColor = 'rgba(255,255,255,.8)';
chartCursor.categoryBalloonEnabled = false;
// WRITE
chart.write("chartdiv");
});
您拥有的示例数据不是每小时一次，而是每月一次（加一小时，但在 amCharts 中，无论如何都是每月一次）。
AmCharts 根据您的类别轴 minPeriod 和当前缩放可见点之间的差异 level/time 来确定显示基于日期的数据的适当时间段。鉴于您的数据相隔一个月以上，它将使用下一个最高周期格式来适应可见周期格式。此格式在类别轴的 dateFormats 数组中定义，该数组设置为：
[{
"period": "fff",
"format": "JJ:NN:SS"
}, {
"period": "ss",
"format": "JJ:NN:SS"
}, {
"period": "mm",
"format": "JJ:NN"
}, {
"period": "hh",
"format": "JJ:NN"
}, {
"period": "DD",
"format": "MMM DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM DD"
}, {
"period": "YYYY",
"format": "YYYY"
}]
调整 MM、WW 和 DD 以在输出中包含小时数将为您提供所需的标签，但由于周期设置，amCharts 会将每个小时解释为午夜，因此您还需要设置 equalSpacing 为 true 以获得每个点的确切时间。
var lineChartData = [{
"date": "2012-01-01 01",
"negative": 80,
"neutral": 40,
"postitive": 60
},
{
"date": "2012-02-01 02",
"negative": 72,
"neutral": 20,
"postitive": 50
},
];
AmCharts.ready(function() {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChartData;
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD HH";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 30;
chart.marginBottom = 30;
chart.marginTop = 40;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
categoryAxis.equalSpacing = true;
categoryAxis.inside = false;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0.5;
categoryAxis.fontSize = 9;
categoryAxis.axisColor = "rgba(255,255,255,0.8)";
categoryAxis.color = "rgba(255,255,255,0.8)";
categoryAxis.dateFormats = [{
"period": "fff",
"format": "JJ:NN:SS"
}, {
"period": "ss",
"format": "JJ:NN:SS"
}, {
"period": "mm",
"format": "JJ:NN"
}, {
"period": "hh",
"format": "JJ:NN"
}, {
"period": "DD",
"format": "MMM DD\nHH:NN"
}, {
"period": "WW",
"format": "MMM DD\nHH:NN"
}, {
"period": "MM",
"format": "MMM DD\nHH:NN"
}, {
"period": "YYYY",
"format": "YYYY"
}];
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 2;
valueAxis.gridColor = "rgba(255,255,255,0.8)";
valueAxis.gridAlpha = 0.2;
valueAxis.axisColor = "rgba(255,255,255,0.8)";
valueAxis.color = "rgba(255,255,255,0.8)";
valueAxis.axisAlpha = 0.5;
valueAxis.fontSize = 9;
chart.addValueAxis(valueAxis);
// members
var graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.valueField = "negative";
graph.lineColor = "#53d769";
graph.lineThickness = 3;
graph.bullet = "round";
//graph.bulletColor = "rgba(0,0,0,0.3)";
graph.bulletBorderColor = "#53d769";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 3;
graph.bulletSize = 6;
chart.addGraph(graph);
// orders
var graph1 = new AmCharts.AmGraph();
graph1.type = "smoothedLine";
graph1.valueField = "neutral";
graph1.lineColor = "#1c7dfa";
graph1.lineThickness = 3;
graph1.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph1.bulletBorderColor = "#1c7dfa";
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
graph1.bulletSize = 6;
chart.addGraph(graph1);
// orders
var graph2 = new AmCharts.AmGraph();
graph2.type = "smoothedLine";
graph2.valueField = "postitive";
graph2.lineColor = "#821908";
graph2.lineThickness = 3;
graph2.bullet = "round";
//graph1.bulletColor = "rgba(0,0,0,0.3)";
graph2.bulletBorderColor = "#821908";
graph2.bulletBorderAlpha = 1;
graph2.bulletBorderThickness = 3;
graph2.bulletSize = 6;
chart.addGraph(graph2);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chartCursor.categoryBalloonAlpha = 0.2;
chartCursor.cursorAlpha = 0.2;
chartCursor.cursorColor = 'rgba(255,255,255,.8)';
chartCursor.categoryBalloonEnabled = false;
// WRITE
chart.write("chartdiv");
});
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 275px; background: #0c0c0c;"></div>