Блог

Главная - Вопросы по программированию - Данные полярного графика Highcharts не отображаются на графике

Данные полярного графика Highcharts не отображаются на графике

#javascript #highcharts

#javascript #highcharts

Вопрос:

ошибка при отображении данных img
введите описание изображения здесь Это мой код для JS. Я получаю данные так, как они отображаются на изображении (синяя полоса полностью слева). Данные полностью слева, и я не уверен, почему. Я не применяю никаких специальных CSS к этому графику. HTML — это просто div с идентификатором для отображения графика. Чего мне здесь не хватает? 🙁

CSS (в браузере)

 * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
rect[Attributes Style] {
    x: 0;
    y: 0;
    width: 1854;
    height: 400;
    fill: rgb(255, 255, 255);
}
user agent stylesheet
* {
    transform-origin: 0px 0px 0px;
}
Inherited from svg
Style Attribute {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-size: 12px;
}
Inherited from body.ng-scope
html, body {
    /* -webkit-tap-highlight-color: transparent; */
    -webkit-touch-callout: none;
    /* min-height: 100%; */
    /* -webkit-text-size-adjust: 100%; */
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    /* line-height: 1.42857143; */
    /* color: #333; */
    /* background-color: #fff; */
}
Inherited from html
button, select, html, textarea, input {
    font-family: Roboto, "Helvetica Neue", sans-serif;
}
html, body {
    /* -webkit-tap-highlight-color: transparent; */
    -webkit-touch-callout: none;
    /* min-height: 100%; */
    /* -webkit-text-size-adjust: 100%; */
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
Pseudo ::before element
:after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
:after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JS 

     //graph
        var irbTable ={
                chart: {
                    renderTo:'irbGraph',
                     inverted: false,
                      polar: true,
                },
                title: {
                    text: 'Top 20 Notifications'
                },
                xAxis: {
                    type: 'category',
                },
                subtitle:{
                    text:"<br>Top 20 Assignee's with the most Notifications"
                },
                series: [{
                    type: 'column',
                    colorByPoint: true,
                    data: [],
                     showInLegend: false
                }]
        }


        $http.get('../irbTop20.json').success( function(data){
            var processedTop20 = new Array();
            $.map(data, function(obj,i) {
                processedTop20.push({name: obj.assignee, y: parseInt(obj.totalNotifications)});
            });                     
            irbTable.series[0].data = processedTop20;

            var AssigneeChart = new Highcharts.Chart(irbTable);
        }).error(function(data,status){console.log("Error status : "  status)});

Комментарии:

1. Я не уверен, что понимаю проблему. Вы хотите сказать, что метки слишком далеко слева? Можете ли вы привести этот минимальный пример, чтобы показать проблему? jsfiddle.net/ghxqf9yx/1

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

3. консоль. запишите irbTable.series[0].массив данных после его установки. Также проверьте элемент в веб-инспекторе, чтобы увидеть, какие стили к нему применены

4. данные заполняются так, как я этого хочу. Имя в качестве имени пользователя и y в качестве totalNotifications. И я обновил вопрос с помощью css из браузера.