【问题标题】:AmCharts weekly data displayAmCharts 每周数据展示
【发布时间】:2016-11-07 15:03:06
【问题描述】:

当“minPeriod”属性等于“WW”时,我无法通过 amcharts 显示数据。

我的代码笔示例:

var data = [];
var date = new Date();

for (var i = 0; i< 10;i++){
data.push({
    calcDate: moment(new Date()).startOf('day').add(i, 'days').toDate(), 
value: Math.random(100)});}

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
        "type": "column",
        "fillAlphas": 1,
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
    "lineColor": "#b6d278",
    "valueField": "value"
}],
"chartCursor": {
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
},
"categoryAxis": {
    "minPeriod": "DD",
    "parseDates": true,
    "minorGridEnabled": true
},
"export": {
    "enabled": true
}});

Days example (how it must look)

var data = [];
var date = new Date();

for (var i = 0; i< 10;i++){
data.push({
    calcDate: moment(new Date()).startOf('day').add(7*i, 'days').toDate(), 
value: Math.random(100)});}

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
        "type": "column",
        "fillAlphas": 1,
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
    "lineColor": "#b6d278",
    "valueField": "value"
}],
"chartCursor": {
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
},
"categoryAxis": {
    "minPeriod": "WW",
    "parseDates": true,
    "minorGridEnabled": true
},
"export": {
    "enabled": true
}
});

Week example (broken).

如您所见,最后一个链接的所有标签都向左对齐,这使我的图表非常难看。我认为这是因为实际值与 categoryAxis 预期值之间的脱节。也许有一个属性可以修复它,但我找不到它。

如果你也遇到过同样的问题,有什么建议给我,请帮忙。

【问题讨论】:

    标签: javascript svg amcharts


    【解决方案1】:

    您可以在 categoryAxis 中将 centerLabels 设置为 true 以强制标签居中。

    Updated codepen

    【讨论】:

    • 谢谢你,正是我想要的!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多