Question

我想用谷歌图表api显示柱形图，这是我的代码。我想在底部x轴显示月份名称，在图表左侧显示y轴值，但是我无法得到它

google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
function drawVisualization() {
// Create and populate the data table.
var JSONObject = { "cols": [
{ "id": "", "label": "Jan", "Pattern": "", "type": "number" },    
{ "id": "", "label": "Feb", "Pattern": "", "type": "number" },
{ "id": "", "label": "Mar", "Pattern": "", "type": "number" },
{ "id": "", "label": "Apr", "Pattern": "", "type": "number" },
          { "id": "", "label": "May", "Pattern": "", "type": "number" },
           { "id": "", "label": "Jun", "Pattern": "", "type": "number" },
            { "id": "", "label": "Jul", "Pattern": "", "type": "number" },
            { "id": "", "label": "Aug", "Pattern": "", "type": "number" },
            { "id": "", "label": "Sep", "Pattern": "", "type": "number" },
            { "id": "", "label": "Oct", "Pattern": "", "type": "number" },
            { "id": "", "label": "Nov", "Pattern": "", "type": "number" },
            { "id": "", "label": "Dec", "Pattern": "", "type": "number" }
            ], "rows":
            [{ "c": [
            { "v": "0"},
             { "v": "0", "f": null },
              { "v": "0", "f": null },
               { "v": "0", "f": null },
                { "v": "0", "f": null },
                 { "v": "0", "f": null },
                  { "v": "2000", "f": null },
                   { "v": "0", "f": null },
                   { "v": "0", "f": null },
                   { "v": "1000", "f": null },
                    { "v": "0", "f": null },
                    { "v": "0", "f": null }
                    ]
  }]
            };
            var data = new google.visualization.DataTable(JSONObject);

   // Create and draw the visualization.
   new google.visualization.ColumnChart(document.getElementById('visualization')).
   draw(data,
       {title:"Yearly Coffee Consumption by Country",
        width:600, height:400,
         hAxis: {title: "Year"}}
   );
  }

Answer 1

您需要更改数据的布局。 Visualization API ColumnCharts（以及大多数类似的Viz API图表）期望第一列中具有域轴（用于ColumnCharts的x轴）值的数据以及以下列中每个数据系列的值（其中每列是一个数据系列））。鉴于您的要求和现有数据，我认为您需要一个包含两列数据的DataTable：“月”和“价值”（或您决定称之为的任何内容）。以下是它的外观示例：

var JSONObject = {
    "cols": [
        {"type": "string", "label": "Month"},
        {"type": "number", "label": "Value"}
    ],
    "rows": [
        {"c":[{"v": "Jan"}, {"v": 0}]},
        {"c":[{"v": "Feb"}, {"v": 0}]},
        {"c":[{"v": "Mar"}, {"v": 0}]},
        {"c":[{"v": "Apr"}, {"v": 0}]},
        {"c":[{"v": "May"}, {"v": 0}]},
        {"c":[{"v": "Jun"}, {"v": 0}]},
        {"c":[{"v": "Jul"}, {"v": 2000}]},
        {"c":[{"v": "Aug"}, {"v": 0}]},
        {"c":[{"v": "Sep"}, {"v": 0}]},
        {"c":[{"v": "Oct"}, {"v": 1000}]},
        {"c":[{"v": "Nov"}, {"v": 0}]},
        {"c":[{"v": "Dec"}, {"v": 0}]}
    ]
};

google-chart api的柱形图问题

1 个答案: