Почему в комбинированном графике отображаются несколько строк (диаграммы Google) - PullRequest
Новая
       9

Почему в комбинированном графике отображаются несколько строк (диаграммы Google)

0 голосов
/ 16 мая 2018

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

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

Это частьданных, которые я использую (полные данные в jsfiddle) 

SupplyRaw = {
  "regional": [
    {
      "category": 1,
      "min": 75,
      "max": 150,
      "avarage": 113,
      "standardDeviation": 32.036437588054845
    }
  ],
  "national": [
    {
      "category": 3,
      "min": 20,
      "max": 464,
      "avarage": 104,
      "standardDeviation": 55.76672091291433
    }
  ]
}

, и вот как я конвертирую данные для комбинированной диаграммы 

var header = [['Category', 'Min', 
'Min Deviation', 
'Max Divation', 'Max', 
{ type: 'string', role: 'style' }, 
'Avarage']];

var dataRegional = google.visualization.arrayToDataTable(
header.concat(SupplyRaw.regional.map(function (x) {
    return [x.category, x.min, 
    x.avarage - x.standardDeviation, 
    x.avarage + x.standardDeviation, 
    x.max, x.category == selected ? 
    'color: #244c8e' : 'color: #4285f4', x.avarage];
})), false);

var dataNational = google.visualization.arrayToDataTable(
header.concat(SupplyRaw.national.map(function (x) {
    return [x.category, x.min, 
    x.avarage - x.standardDeviation, 
    x.avarage + x.standardDeviation, 
    x.max, x.category == selected ? 
    'color: #244c8e' : 'color: #4285f4', x.avarage];
})), false);

var options = {
    legend: 'none',
    hAxis: {
        title: 'Metrage', gridlines: { count: 7 }, 
        ticks: new Array(7).fill().map(function (val, i) { 
        return { v: i, f: getMetrageCategoryString(i) }; 
        })
    },
    seriesType: "candlesticks",
    series: { 1: { type: "line" } },
    animation: {
        duration: 1000,
        easing: 'out'
    },
};

var chart = 
new google.visualization.ComboChart(document.getElementById("chart_div"));
chart.draw(dataRegional, options);

Я поместил свой код в этоjsFiddle: https://jsfiddle.net/znrsrhzc/1/ Я надеюсь, что кто-то может определить проблему здесь

1 Ответ

0 голосов
/ 16 мая 2018

, поскольку данные не загружаются в порядке оси X,
необходимо отсортировать таблицу данных перед рисованием.

dataNational.sort([{column: 0}]);

см. Следующий рабочий фрагмент ... 

SupplyRaw = {
  "regional": [
    {
      "category": 1,
      "min": 75,
      "max": 150,
      "avarage": 113,
      "standardDeviation": 32.036437588054845
    },
    {
      "category": 2,
      "min": 89,
      "max": 162,
      "avarage": 117,
      "standardDeviation": 26.979004182264877
    },
    {
      "category": 3,
      "min": 31,
      "max": 50,
      "avarage": 42,
      "standardDeviation": 10.214368964029715
    }
  ],
  "national": [
    {
      "category": 3,
      "min": 20,
      "max": 464,
      "avarage": 104,
      "standardDeviation": 55.76672091291433
    },
    {
      "category": 6,
      "min": 20,
      "max": 115,
      "avarage": 65,
      "standardDeviation": 28.04067083325969
    },
    {
      "category": 1,
      "min": 23,
      "max": 500,
      "avarage": 192,
      "standardDeviation": 89.87525674143646
    },
    {
      "category": 7,
      "min": 25,
      "max": 100,
      "avarage": 49,
      "standardDeviation": 23.556315501368204
    },
    {
      "category": 4,
      "min": 20,
      "max": 300,
      "avarage": 88,
      "standardDeviation": 48.83288977327806
    },
    {
      "category": 5,
      "min": 20,
      "max": 210,
      "avarage": 72,
      "standardDeviation": 38.35082894261975
    },
    {
      "category": 2,
      "min": 20,
      "max": 500,
      "avarage": 137,
      "standardDeviation": 72.39801425371081
    }
  ]
}

function getMetrageCategoryString(id) {
    if (id === 1)
        return '< 250';
    else if (id === 2)
        return '250 - 500';
    else if (id === 3)
        return '500 - 1k';
    else if (id === 4)
        return '1k -  2.5k';
    else if (id === 5)
        return '2.5k - 5k';
    else if (id === 6)
        return '5k - 10k';
    else if (id === 7)
        return '10k >';
    else
        return "";
}
var selected = 2;
google.charts.load('current', {
  callback: function () {
    var header = [['Category', 'Min',
    'Min Deviation',
    'Max Divation', 'Max',
    { type: 'string', role: 'style' },
    'Avarage']];

    var dataRegional = google.visualization.arrayToDataTable(
    header.concat(SupplyRaw.regional.map(function (x) {
        return [x.category, x.min,
        x.avarage - x.standardDeviation,
        x.avarage + x.standardDeviation,
        x.max, x.category == selected ?
        'color: #244c8e' : 'color: #4285f4', x.avarage];
    })), false);

    var dataNational = google.visualization.arrayToDataTable(
    header.concat(SupplyRaw.national.map(function (x) {
        return [x.category, x.min,
        x.avarage - x.standardDeviation,
        x.avarage + x.standardDeviation,
        x.max, x.category == selected ?
        'color: #244c8e' : 'color: #4285f4', x.avarage];
    })), false);
    var options = {
        legend: 'none',
        hAxis: {
            title: 'Metrage', gridlines: { count: 7 },
            ticks: new Array(7).fill().map(function (val, i) {
            return { v: i, f: getMetrageCategoryString(i) };
            })
        },
        seriesType: "candlesticks",
        series: { 1: { type: "line" } },
        animation: {
            duration: 1000,
            easing: 'out'
        },
    };

    var chart =
    new google.visualization.ComboChart(document.getElementById("chart_div"));
    chart.draw(dataRegional, options);
    $("#Regional").click(function () {
        dataRegional.sort([{column: 0}]);
        chart.draw(dataRegional, options);
    });
    $("#National").click(function () {
        dataNational.sort([{column: 0}]);
        chart.draw(dataNational, options);
    });
  },
  packages: ['corechart', 'table']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<button id="Regional" type="button">Regional</button>
<button id="National" type="button">National</button>
...