highcharts 使用

简介: highcharts 使用                   $.getJSON(url,function(jsonObject){ chart = new Highcharts.

highcharts 使用

 

 

 



 

 


       

  $.getJSON(url,function(jsonObject){
               chart = new Highcharts.Chart({ //HighCharts核心方法
                chart: {
                 renderTo: renderId,   //放置图标的容器(DIV)
                 defaultSeriesType: 'line', //折线图
                 zoomType: 'x',
                 backgroundColor: jsonObject.backgroundColor
                },
                credits: {             
                 enabled: false   //右下角不显示LOGO         
                }, 
                title: {
                          text: jsonObject.title,
                          style: {
                           font: '16px "Microsoft YaHei"',
                           color: '#393942'
                          }
                      },
                   xAxis: {  //X轴
                    categories: eval("(" + jsonObject.categories + ")"),
                       labels: eval("(" + jsonObject.xAxis_labels + ")")
                   },
                   yAxis: {
                       max: jsonObject.y_axis_max,
                 min: jsonObject.y_axis_min,
                 allowDecimals:false,
                          title: {
                              text: ''
                          }
                      },
                      tooltip: {
                          headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
                          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                              '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                          footerFormat: '</table>',
                          shared: true,
                          useHTML: true,
                          borderColor: '#4BA9DF'
                      },
                      exporting: {             
                    enabled: false  //设置导出按钮不可用         
                   },
                   legend: {
                          enabled: true,
                          symbolWidth: 5,
                          borderWidth: 0
                   },
                   series: eval("(" + jsonObject.series + ")")
               });
              });

 

JSONObject jsonObject = new JSONObject();
try {
int step = 1;
JSONArray jsonArray = new JSONArray();
for (int i = showDataNum; i > 0; i--) {
jsonArray.put(DateUtils.formatDate(DateUtils
.getStringByBefore(i)));
}
jsonObject.put("categories", jsonArray.toString());
jsonObject
.append("series",
"[{name:'新增用户',color: '#4BA9DF',data: [1,2,3,4,5,6,5]}]");
jsonObject.append("xAxis_labels", "{step:" + step + "}");
jsonObject.append("title", "目前没有有效数据产生");
jsonObject.append("backgroundColor", "#ebebeb");
} catch (JSONException e) {
	e.printStackTrace();
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(右上角的爱心标志,支持支付宝和PayPal捐助),没钱捧个人场,谢谢各位。



 
 
 谢谢您的赞助,我会做的更好!

 

 

目录
相关文章
|
11月前
|
前端开发 JavaScript API
Highcharts使用的一些总结
Highcharts使用的一些总结
60 0
|
5月前
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
108 1
|
11月前
拾色器插件colorpicker.js的应用
拾色器插件colorpicker.js的应用
42 1
|
11月前
|
JSON 前端开发 JavaScript
HighChart使用总结
HighChart使用总结
50 0
|
JavaScript
vue里echarts实现折线图tooltip自定义样式
vue里echarts实现折线图tooltip自定义样式
358 0
vue里echarts实现折线图tooltip自定义样式
|
前端开发 小程序
Echart 使用
Echart 使用
142 0
Echart 使用
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发 Java
|
Web App开发 JavaScript 前端开发