Почему моя серийная диаграмма amChart не отображается, если в конфиг входит свойство categoryAxis?

У меня есть диаграмма, которая отказывается отображать правильно, если я включу свойство categoryAxis в параметры диаграммы. Под «рендерингом правильно» я имею в виду, что область графика отображается, заголовок отображается, но ни один из столбцов не отображается.Почему моя серийная диаграмма amChart не отображается, если в конфиг входит свойство categoryAxis?

Я использую последовательный график AmCharts с GrantMStevens amChartsDirective, потому что мой проект построен в Angularjs.

Here is a plunk with the categoryAxis commented out. Если вы включите эту строку кода, диаграмма немедленно проявит это поведение.

В этой таблице используются текстовые значения для categoryField и числовые значения для valueField. У меня есть другая диаграмма, которая использует значения даты для categoryField и числовые значения для valueField, и она работает просто отлично.

Я предполагаю, что существует некоторое взаимодействие между тем фактом, что это не categoryField не является значением даты, которое вызывает это, но я не могу найти никакой комбинации свойств, которая позволяет мне устанавливать свойства на categoryField.

Это то, что я хочу сделать:

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 
    }; 
});

источник

2016-09-29 Steve Sheppard

почему угловая директива устанавливает parseDates истина по умолчанию, если у вас есть categoryAxis, который разбивается, если ваша диаграмма не основана на дате. Если вы установили parseDates: false в вашей категорииAxis, он будет работать.

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

Вот ваш обновленный звенеть: http://plnkr.co/edit/TYZdR0KEOAKcbHnGdTfP?p=preview

Обратите внимание, я изменил ваш gridColor в шестнадцатеричном эквиваленте. Хотя именованные цвета будут работать, если вы планируете использовать плагин экспорта, вам нужно будет установить цвета как шестую строку.

источник

2016-09-29 17:12:34 xorspark

Это было! Ты обалденный! Я напишу об ошибке с помощью amChartsDirective. Спасибо за помощь :) –

Добро пожаловать! Я также заметил, что они все еще ссылаются на древние версии библиотеки cdnjs. Вы можете напрямую ссылаться на размещенные CDN-файлы AmCharts, если вам нужна последняя версия. Я обновил свой плунжер, чтобы указать на эти файлы. – xorspark

Почему моя серийная диаграмма amChart не отображается, если в конфиг входит свойство categoryAxis?

ответ

Смежные вопросы