Question

美好的一天！我的代码不显示图表。我试图将我的json数据绘制到谷歌材料折线图中，以输出如下图表：

这是我的javascript代码：

    google.charts.load('current', {'packages': ['line', 'corechart', 'bar','controls', 'table']});
google.charts.setOnLoadCallback(drawChartCountry);

function drawChartCountry() {

    var jsonData1 = $.ajax({
        url: "analytics/country-sales.php",
        dataType: "json",
        async: false
    }).responseText;

    var data1 = new google.visualization.DataTable(jsonData1);

    var options = {
    title: 'Top 20 Countries with the highest sales',
    pointSize: 5
    };
    var formatter_amount1 = new google.visualization.NumberFormat({prefix: 'HKD ', negativeColor: 'red', negativeParens: true});
   // formatter_amount1.format(data1, 1);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div_country'));
    chart.draw(data1, options);

}

这是我的json数据

    {"cols":[[[{"label":"Date","type":"string"},{"label":"TAIWAN","type":"string"},{"label":"HONG KONG","type":"string"},{"label":"JAPAN","type":"string"},{"label":"INDONESIA","type":"string"},{"label":"THAILAND","type":"string"},{"label":"UNITED STATES","type":"string"},{"label":"PHILIPPINES","type":"string"},{"label":"UNITED KINGDOM","type":"string"},{"label":"MALAYSIA","type":"string"},{"label":"AUSTRALIA","type":"string"},{"label":"SINGAPORE","type":"string"},{"label":"SPAIN","type":"string"},{"label":"SWEDEN","type":"string"},{"label":"GERMANY","type":"string"},{"label":"VIET NAM","type":"string"},{"label":"SOUTH KOREA","type":"string"},{"label":"NORWAY","type":"string"},{"label":"FRANCE","type":"string"},{"label":"CANADA","type":"string"},{"label":"NETHERLANDS","type":"string"}]]],"rows":[{"c":[{"v":"Date(2014,1,1)"},{"v":48876},{"v":3970},{"v":2505},{"v":1824},{"v":982},{"v":676},{"v":491},{"v":387},{"v":238},{"v":173},{"v":162},{"v":108},{"v":101},{"v":98},{"v":96},{"v":91},{"v":88},{"v":84},{"v":82},{"v":72}]}]}

这是html代码（删除了与此主题无关的一些元素）

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="analytics/sales-country.js"></script>
</head>
<body>
<div class="row">
    <div class="col-md-12 col-sm-12">
        <div id='chart_div_country' style='width: 100%; height: 600px;'></div>
    </div>
</div>
</body>

任何人都可以帮助我。谢谢。任何答案都非常感谢。

Answer 1

首先，"cols"包含在太多数组中

[[[]]]与[]

{"cols":[[[{"label":"Date","type":"string"},...,{}]]],

应该是......

{"cols":[{"label":"Date","type":"string"},...,{}],

下一步，系列的列类型应为'number'
并为第一列推荐'date'

这......

  "cols": [
    {"label":"Date","type":"date"},
    {"label":"TAIWAN","type":"number"},
    {"label":"HONG KONG","type":"number"},

不这个......

  "cols": [
    {"label":"Date","type":"string"},
    {"label":"TAIWAN","type":"string"},
    {"label":"HONG KONG","type":"string"},

还，如果您需要材料折线图，

只需要'line'包和......

google.charts.Line

Core 图表版本是......

google.visualization.LineChart

并强烈建议不使用async: false，而是使用.done和.fail回调

请参阅以下工作代码段，将代码从.fail移至.done以进行本地测试...

google.charts.load("current", {
  callback: drawChartCountry,
  packages: ["line", "corechart"]
});

function drawChartCountry() {
  $.ajax({
    url: "analytics/country-sales.php",
    dataType: "json"
  }).done(function (jsonData) {
  }).fail(function (jqXHR, textStatus) {
    var jsonData = {
      "cols": [
        {"label":"Date","type":"date"},
        {"label":"TAIWAN","type":"number"},
        {"label":"HONG KONG","type":"number"},
        {"label":"JAPAN","type":"number"},
        {"label":"INDONESIA","type":"number"},
        {"label":"THAILAND","type":"number"},
        {"label":"UNITED STATES","type":"number"},
        {"label":"PHILIPPINES","type":"number"},
        {"label":"UNITED KINGDOM","type":"number"},
        {"label":"MALAYSIA","type":"number"},
        {"label":"AUSTRALIA","type":"number"},
        {"label":"SINGAPORE","type":"number"},
        {"label":"SPAIN","type":"number"},
        {"label":"SWEDEN","type":"number"},
        {"label":"GERMANY","type":"number"},
        {"label":"VIET NAM","type":"number"},
        {"label":"SOUTH KOREA","type":"number"},
        {"label":"NORWAY","type":"number"},
        {"label":"FRANCE","type":"number"},
        {"label":"CANADA","type":"number"},
        {"label":"NETHERLANDS","type":"number"}
      ],
      "rows":[
        {"c":[
          {"v":"Date(2014,1,1)"},
          {"v":48876},
          {"v":3970},
          {"v":2505},
          {"v":1824},
          {"v":982},
          {"v":676},
          {"v":491},
          {"v":387},
          {"v":238},
          {"v":173},
          {"v":162},
          {"v":108},
          {"v":101},
          {"v":98},
          {"v":96},
          {"v":91},
          {"v":88},
          {"v":84},
          {"v":82},
          {"v":72}
        ]},
        {"c":[
          {"v":"Date(2015,1,1)"},
          {"v":48876},
          {"v":3970},
          {"v":2505},
          {"v":1824},
          {"v":982},
          {"v":676},
          {"v":491},
          {"v":387},
          {"v":238},
          {"v":173},
          {"v":162},
          {"v":108},
          {"v":101},
          {"v":98},
          {"v":96},
          {"v":91},
          {"v":88},
          {"v":84},
          {"v":82},
          {"v":72}
        ]}
      ]
    };

    var data = new google.visualization.DataTable(jsonData);

    var options = {
      title: 'Top 20 Countries with the highest sales',
      pointSize: 5
    };

    var chart = new google.charts.Line(document.getElementById('chart_div_country'));
    chart.draw(data, options);

    //console.log('error', textStatus);
  });
}

<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 class="row">
  <div class="col-md-12 col-sm-12">
    <div id='chart_div_country' style='width: 100%; height: 600px;'></div>
  </div>
</div>

如何使用PHP，MySQL和＆amp ;;将我的json数据绘制到Google Material Line Chart中JavaScript的

1 个答案: