Question

我正在尝试绘制线图，但这些在图形区域的底部呈现为一条直线。我也在其中添加了列图。它们显示正常，但是线条图显示的直线不正确。我最后添加了截图。请帮忙。

这是我的图表标题

var header_graph = [{"balloonText":"[[title]] of [[category]]:[[value]]",
                       "fillAlphas":"1",
                       "id":"ProductA",
                       "title":"Produc A ",
                       "type":"SmoothedLine",
                       "valueField":"column2"}];

这是我的图表数据值

var data_graph  = [{"category":"Jan",  
                    "column1":"85", "column2":"24", "column3":"343", 
                    "column4":"85",  "column5":"31", "column6":"267", 
                    "column7":"85",  "column8":"19", "column9":"439"},......]

这是生成图表的整个脚本

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "depth3D": 2,
    "startDuration": 1,
    "theme": "light",
    "precision": 2,
    "valueAxes": [{
        "id": "v1",
        "title": "",
        "position": "left",
        "autoGridCount": false,
    }, {
        "id": "v2",
        "title": "",
        "gridAlpha": 0,
        "position": "right",
        "autoGridCount": false
    }],
    "graphs": header_graph ,
    "chartScrollbar": {
        "graph": "column2",
        "oppositeAxis": false,
        "offset": 30,
        "scrollbarHeight": 50,
        "backgroundAlpha": 0,
        "selectedBackgroundAlpha": 0.1,
        "selectedBackgroundColor": "#888888",
        "graphFillAlpha": 0,
        "graphLineAlpha": 0.5,
        "selectedGraphFillAlpha": 0,
        "selectedGraphLineAlpha": 1,
        "autoGridCount": true,
        "color": "#AAAAAA"
    },
    "chartCursor": {
        "pan": true,
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha": 0,
        "valueLineAlpha": 0.2
    },
    "categoryField": "category",
    "categoryAxis": {
        "parseDates": false,
        "dashLength": 1,
        "minorGridEnabled": true,
        "gridPosition": "start"
    },
    "legend": {
        "useGraphSettings": true,
        "position": "bottom"
    },
    "balloon": {
        "borderThickness": 1,
        "shadowAlpha": 0
    },
    "export": {
        "enabled": false
    },
    "dataProvider":  data_graph

});

Answer 1

该图表相对于图表的数值范围按比例绘制您的线条，看起来该线条的值与其他列相比非常小。由于这个原因，它看起来像是一条靠近底部的直线。

您可以使用valueScrollbar并让您的用户放大valueAxis / Y轴，以便他们可以更好地查看该行。它与chartScrollbar中的this demo from AmCharts具有相同的属性：

  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },

除此之外或者让你的价值比maximum更小，你也无法做到。

（关于主题，你应该设置你的值数字，而不是字符串。）

修改

您可以使用addInitHandler动态设置图表的最大值和最小值，以使图表在图表初始化时确定这些值，如下所示：

//get the maximum and minimum values from the dataProvider AmCharts.addInitHandler(function(chart) { var maximum = Number.MIN_VALUE; var minimum = Number.MAX_VALUE; chart.dataProvider.forEach(function(data) { //for each dataProvider element, check the properties that correspond to the chart graphs' valueFields. chart.graphs.forEach(function(graph) { if (data[graph.valueField] != null) { maximum = Math.max(maximum, data[graph.valueField]); minimum = Math.min(minimum, data[graph.valueField]); } }); }); chart.valueAxes[0].maximum = maximum; chart.valueAxes[0].minimum = minimum; chart.valueAxes[0].strictMinMax = true; }, ["serial"]);

Demo

线图在AM图表中呈现为直线

1 个答案: