使用google.visualization
在MVC 5 Web应用程序中填充图表。
我必须做什么设置? 脚本:
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var rows = new Array();
var jsonData = '@Html.Raw(@Newtonsoft.Json.JsonConvert.SerializeObject((List<ChartDTO>)Model.Charts.ToList()))';
$.each($.parseJSON(jsonData), function () {
rows.push([parseInt(this.UserCount)]);
});
var data = google.visualization.arrayToDataTable([
['Month', ''],
['Jan', parseInt(rows[0])],
['Feb', parseInt(rows[1])],
['Mar', parseInt(rows[2])],
['Apr', parseInt(rows[3])],
['May', parseInt(rows[4])],
['Jun', parseInt(rows[5])],
['Jul', parseInt(rows[6])],
['Aug', parseInt(rows[7])],
['Sep', parseInt(rows[8])],
['Oct', parseInt(rows[9])],
['Nov', parseInt(rows[10])],
['Dec', parseInt(rows[11])]
]);
var options = {
title: 'Traffic',
vAxis: {title: "Registrations", viewWindow: { min: 0 }},
curveType: 'function',
legend: { position: 'bottom' },
series: { 0: { color: 'red' } },
hAxis: { title: "Months" },
'chartArea': { 'width': '80%', 'height': '70%' },
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
答案 0 :(得分:1)
您可以使用series0.chart-line-symbol {
-fx-background-color: green;
-fx-background-insets: 0;
-fx-background-radius: 0px;
-fx-padding: 5px;
}
作为位置来停用图例:
'none'
示例强>
legend: {position: 'none'}
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var rows = new Array();
for (var i = 0; i < 12; i++) {
rows.push(getRandomInt(0, 100));
}
var data = google.visualization.arrayToDataTable([
['Month', ''],
['Jan', parseInt(rows[0])],
['Feb', parseInt(rows[1])],
['Mar', parseInt(rows[2])],
['Apr', parseInt(rows[3])],
['May', parseInt(rows[4])],
['Jun', parseInt(rows[5])],
['Jul', parseInt(rows[6])],
['Aug', parseInt(rows[7])],
['Sep', parseInt(rows[8])],
['Oct', parseInt(rows[9])],
['Nov', parseInt(rows[10])],
['Dec', parseInt(rows[11])]
]);
var options = {
title: 'Traffic',
vAxis: { title: "Registrations", viewWindow: { min: 0 } },
curveType: 'function',
legend: { position: 'none' },
series: { 0: { color: 'red' } },
hAxis: { title: "Months" },
'chartArea': { 'width': '80%', 'height': '70%' },
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}