使用amCharts以x轴值显示日期
Display date in x Axis value using amCharts
我有一个AmSerialChart
,上面有三个AmGraph
,我格式化了气球文本,如下所示:
grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";
类别(x值)的问题也显示在气球文本中,格式如下:"MMM DD,YYYY"。如何以其他方式显示此日期?
我已经检查了categoryaxis中的dateFormats
和dataDateFormat
,但这只会更改底部值。
以下是迄今为止的完整代码:
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var chartData = <% properties.get("jsonData") %>;
var chartTitles = <% properties.get("jsonTitles") %>;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];
// 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 = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "ss";
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = "#DADADA";
// categoryAxis.dateFormats = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];
var vAxis = new AmCharts.ValueAxis();
chart.addValueAxis(vAxis);
for (var i = 0; i < chartTitles.length; i++) {
var grp = new AmCharts.AmGraph();
grp.valueField = "d"+i;
grp.title = chartTitles[i];
grp.type = "line";
grp.valueAxis = vAxis; // indicate which axis should be used
grp.lineThickness = 1;
grp.bullet = "round";
grp.labelPosition = "right";
grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";
grp.balloonText = "[[value]], [[description]], [[percents]], [[open]], [[total]], [[category]]";
grp.showBalloon = true;
grp.bulletSize = 1;
grp.bulletBorderThickness = 6;
grp.dashLengthField = "dashLength";
chart.addGraph(grp);
}
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 180;
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
<div id="chartdiv" style="width: 100%; height: 360px;"></div>
好问题,帮助我发现文档中缺少属性。如果不使用ChartCursor,则应使用chart.alloonDateFormat属性来格式化日期。
相关文章:
- 更新URL时使用Javascript函数显示日期
- 以datetime本地格式一个接一个地显示日期
- 单击复选框时显示日期选择器
- 使用外部 JavaScript 显示日期/时间
- 如何在 laravel 的页面上显示日期选择器
- 希望创建一个显示日期+5天和日期+10天之间交付的javascript
- 在谷歌图表折线图的x轴上显示日期,而不是时间戳
- 使用Angular.ui Datepicker没有显示日期
- 使用amCharts以x轴值显示日期
- 单击按钮时显示日期选择器
- 通过JavaScript显示日期
- 用格式显示日期
- 第一次单击时未显示日期选取器
- Highcharts日期时间轴,如何禁用时间部分(仅显示日期)
- 使用MomentJs显示日期时间,而无需进行时区转换
- 高图表(高库存):从外部 CSV 获取数据,无法正确显示日期
- 在两个地方显示日期差异
- 不显示日期日历
- 角度 ng 显示日期在时间范围内或不从
- jQuery dynamic Datepicker.我无法显示日期值