为簇状条形图 [AmCharts] 设置标题不起作用

Question

我想设置标题，但无法使用 Clustered Bar (Serial) Chart 来设置。我按照 (http://docs.amcharts.com/3/javascriptmaps/Title) 中的描述使用 "title"。它适用于饼图，但不适用于簇状条形图（序列）图。我在 jsfiddle

中包含示例代码

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "titles": [{
        "text": "Hours Plot",
        "size": 15
     }],
    "legend": {
        "useGraphSettings": true
      },
    "categoryField": "discipline",
    "rotate": true,
    "startDuration": 0,
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "trendLines": [],
    "graphs": [
        {
            "balloonText": "Budget Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-1",
            "lineAlpha": 0.2,
            "title": "Budget Hours",
            "type": "column",
            "valueField": "budgetHours"
        },
        {
            "balloonText": "Earned Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-2",
            "lineAlpha": 0.2,
            "title": "Earned Hours",
            "type": "column",
            "valueField": "earnedHours"
        },
        {
            "balloonText": "Actual Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-3",
            "lineAlpha": 0.2,
            "title": "Actual Hours",
            "type": "column",
            "valueField": "actualHours"
        },
        {
            "balloonText": "Forecast Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-4",
            "lineAlpha": 0.2,
            "title": "Forecast Hours",
            "type": "column",
            "valueField": "forecastHours"
        }
    ],
    "guides": [],
    "valueAxes": [
        {
            "id": "ValueAxis-1",
            "position": "top",
            "axisAlpha": 0
        }
    ],
    "allLabels": [],
    "balloon": {},
    "titles": [],
    "dataProvider": [
        {
            "discipline": "Completion",
            "budgetHours": 23.5,
            "earnedHours": 18.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Insulation",
            "budgetHours": 26.2,
            "earnedHours": 22.8,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Electrical",
            "budgetHours": 30.1,
            "earnedHours": 23.9,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Mechanical",
            "budgetHours": 29.5,
            "earnedHours": 25.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Piping",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours": 11
        },
        {
            "discipline": "Civil",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours" : 11
        }
    ],
    "export": {
        "enabled": true
     }
});

http://jsfiddle.net/q0eLc28j/1/

Answer 1

您的图表配置中有两个 title 数组。一个是你所期望的，另一个是空的。后者覆盖第一个，因此没有标题。

只需删除空的 "titles": [], 一个。

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "titles": [{
        "text": "Hours Plot",
        "size": 15
     }],
    "legend": {
        "useGraphSettings": true
      },
    "categoryField": "discipline",
    "rotate": true,
    "startDuration": 0,
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "trendLines": [],
    "graphs": [
        {
            "balloonText": "Budget Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-1",
            "lineAlpha": 0.2,
            "title": "Budget Hours",
            "type": "column",
            "valueField": "budgetHours"
        },
        {
            "balloonText": "Earned Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-2",
            "lineAlpha": 0.2,
            "title": "Earned Hours",
            "type": "column",
            "valueField": "earnedHours"
        },
        {
            "balloonText": "Actual Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-3",
            "lineAlpha": 0.2,
            "title": "Actual Hours",
            "type": "column",
            "valueField": "actualHours"
        },
        {
            "balloonText": "Forecast Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-4",
            "lineAlpha": 0.2,
            "title": "Forecast Hours",
            "type": "column",
            "valueField": "forecastHours"
        }
    ],
    "guides": [],
    "valueAxes": [
        {
            "id": "ValueAxis-1",
            "position": "top",
            "axisAlpha": 0
        }
    ],
    "allLabels": [],
    "balloon": {},
    // the following line needs to be removed
    // "titles": [],
    "dataProvider": [
        {
            "discipline": "Completion",
            "budgetHours": 23.5,
            "earnedHours": 18.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Insulation",
            "budgetHours": 26.2,
            "earnedHours": 22.8,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Electrical",
            "budgetHours": 30.1,
            "earnedHours": 23.9,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Mechanical",
            "budgetHours": 29.5,
            "earnedHours": 25.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Piping",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours": 11
        },
        {
            "discipline": "Civil",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours" : 11
        }
    ],
    "export": {
        "enabled": true
     }
});

已更新 fiddle：http://jsfiddle.net/q0eLc28j/3/

为簇状条形图 [AmCharts] 设置标题不起作用

set title for Clustered Bar Chart [AmCharts] does not work

amcharts