javascript - 为什么我的组合图表(Google 图表)中有多条线

Question

使用 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/我希望有人能在这里发现问题

Answer 1

由于数据没有按照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>