gochart/point_line_html.go

94 lines
3.3 KiB
Go
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

package main
var PointLineHtml = `{{define "T"}}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript">{{.JQuery183MinJS}}</script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
// type: 'spline'
type: '{{.ChartType}}'
// 默认是折线图(line)。type取值如下
// line:折线图
// spline:曲线图,线条圆滑一些
// column:竖向柱状图
// area:面积图
// bar:横向柱状图
// 更多选项请参考http://api.highcharts.com/highcharts#plotOptions
},
title: {
// text: 'Monthly Average Temperature',
text: '{{.Title}}',
//x: -20 //center
},
subtitle: {
// text: 'Source: WorldClimate.com',
text: '{{.SubTitle}}',
//x: -20
},
xAxis: {
// categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
categories: {{.XAxisNames}} // JSONArray格式字符串与x轴上点数的个数一致
},
yAxis: {
title: {
// text: 'Temperature (°C)'
text: '{{.YAxisName}}'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
// valueSuffix: '°C'
valueSuffix: '{{.ValueSuffix}}'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
{{.DataArray}}
/*
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
*/
]
});
});
</script>
</head>
<body>
<script>{{.HighChartsJS}}</script>
<script>{{.ModulesExportingJS}}</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
{{end}}
`