美好的一天,我在制作谷歌折线图时遇到了麻烦。 我的目标图是这样的:(见图)
这是我的javascript代码:
google.charts.load('current', {'packages': ['line', 'corechart', 'bar','controls', 'table']});
google.charts.setOnLoadCallback(drawChartMonthly);
function drawChartMonthly() {
var jsonData = $.ajax({
url: "analytics/platform-sales.php",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Music Services sales',
pointSize: 5
};
var chart = new google.charts.Line(document.getElementById('chart_div_platform'));
chart.draw(data, options);
}
这是我的HTML:
<div class="row">
<div class="col-md-4 col-sm-12">
<div id="chart_div_platform" style='width: 1200px; height: 600px;'></div>
</div>
</div>
这是我的样本json数据:
{"cols":[{"label":"Month","type":"date"},{"label":"Platform","type":"string"},{"label":"Amount","type":"number"}],
"rows":[{"c":[{"v":"Date(2013,3,1)"},{"v":"Tunecore"},{"v":19932}]},
{"c":[{"v":"Date(2013,4,1)"},{"v":"Platform1"},{"v":17930}]},
{"c":[{"v":"Date(2013,4,1)"},{"v":"Platform2"},{"v":16930}]},
{"c":[{"v":"Date(2013,4,1)"},{"v":"Platform3"},{"v":15930}]},
{"c":[{"v":"Date(2013,4,1)"},{"v":"Platform4"},{"v":14930}]},
{"c":[{"v":"Date(2013,5,1)"},{"v":"Platform1"},{"v":17930}]},
{"c":[{"v":"Date(2013,5,1)"},{"v":"Platform2"},{"v":16930}]},
{"c":[{"v":"Date(2013,5,1)"},{"v":"Platform3"},{"v":15930}]},
{"c":[{"v":"Date(2013,5,1)"},{"v":"Platform4"},{"v":14930}]},
{"c":[{"v":"Date(2013,6,1)"},{"v":"Platform1"},{"v":17930}]},
{"c":[{"v":"Date(2013,6,1)"},{"v":"Platform2"},{"v":16930}]},
{"c":[{"v":"Date(2013,6,1)"},{"v":"Platform3"},{"v":15930}]},
{"c":[{"v":"Date(2013,6,1)"},{"v":"Platform4"},{"v":14930}]},
{"c":[{"v":"Date(2013,7,1)"},{"v":"Platform1"},{"v":17930}]},
{"c":[{"v":"Date(2013,7,1)"},{"v":"Platform2"},{"v":16930}]},
{"c":[{"v":"Date(2013,7,1)"},{"v":"Platform3"},{"v":15930}]},
{"c":[{"v":"Date(2013,7,1)"},{"v":"Platform4"},{"v":14930}]}]}
你们能举个例子吗?请。谢谢。