如果配置包含 categoryAxis 属性，为什么我的 amChart 系列图表不会呈现？

Question

如果我在图表选项中包含 categoryAxis 属性，我的图表将无法正确呈现。 "render properly"，我的意思是显示了绘图区域，显示了标题，但呈现了 none 的列。

我正在使用 GrantMStevens amChartsDirective 的 AmCharts 系列图表，因为我的项目是在 Angularjs 中构建的。

Here is a plunk with the categoryAxis commented out. 如果启用该行代码，图表将立即显示此行为。

此图表使用 categoryField 的文本值和 valueField 的数值值。我有另一个图表，它使用 categoryField 的日期值和 valueField 的数值，它工作得很好。

我假设这不是 categoryField 不是导致此问题的日期值这一事实之间存在某种相互作用，但我找不到任何属性组合可以让我在 [= 上设置属性16=]。

这就是我想做的事情：

    categoryAxis: {
        gridAlpha: 0.3,
        gridColor: "GRAY"
    },

有谁知道为什么这不起作用？

这里是 HTML:

<html ng-app="amChartsDirectiveExample">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div>
    <div ng-controller="amChartsController2" style="height: 400px; width: 600px;">
        <am-chart id="mySecondChart" options="amChartOptions2"></am-chart>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/chalk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/black.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/dark.js"></script>
<script src="https://rawgit.com/ThumbsAlmighty/amCharts-Angular/master/dist/amChartsDirective.js"></script>
<script src="script.js"></script>
<script src="theme.js"></script>
</body>

这里是 JavaScript:

angular.module('amChartsDirectiveExample', ['amChartsDirective'])
.controller('amChartsController2', function($scope) {
    $scope.chartData = [
            {
                "EscalationCount": "2",
                "Area": "One"
            },
            {
                "EscalationCount": "9",
                "Area": "Two"
            },
            {
                "EscalationCount": "5",
                "Area": "Three"
            },
            {
                "EscalationCount": "4",
                "Area": "Four"
            },
            {
                "EscalationCount": "3",
                "Area": "Five"
            }];

    $scope.amChartOptions2 = {
    type: "serial",
    categoryField: "Area",
    startDuration: 1,
    rotate: true,
    theme: "light",
    trendLines: [],
    //categoryAxis: {},  // Uncomment this line to break the chart.
    graphs: [{
        balloonText: "[[title]] for [[category]]: [[value]]",
        fillAlphas: 1,
        id: "AmGraph-1",
        title: "Escalation Volume",
        type: "column",
        valueField: "EscalationCount"
    }],
    guides: [],
    valueAxes: [{
        id: "ValueAxis-1",
        title: "EscalationCount",
    }],
    allLabels: [],
    balloon: [],
    legend: {
        enabled: false
    },
    titles: [{
        id: "Title-1",
        size: 15,
        text: "Lookit me! I rendered the Chart title!"
    }],
    data: $scope.chartData
    };
});

Answer 1

出于某种原因，如果您定义了 categoryAxis，angular 指令默认将 parseDates 设置为 true，如果您的图表不是基于日期的，它会中断。如果您在 categoryAxis 中设置 parseDates: false，它将起作用。

  categoryAxis: {
    parseDates: false,
    gridAlpha: 0.3,
    gridColor: "#d3d3d3"
  },

这是您更新后的内容：http://plnkr.co/edit/TYZdR0KEOAKcbHnGdTfP?p=preview

请注意，我将您的 gridColor 更改为等效的十六进制。虽然命名颜色会起作用，但如果您打算使用导出插件，则需要将颜色设置为十六进制字符串。

如果配置包含 categoryAxis 属性，为什么我的 amChart 系列图表不会呈现？

Why won't my amChart serial chart render if the config includes the categoryAxis property?

amcharts