新手学HighCharts（一）----基本使用

    最近做的项目需要用到数据分析，图表显示，之前做项目的时候用到过highcharts，不过也只是简单的会用而已，然后再网上查了查highcharts的优点：

Highcharts使用的一些优点的介绍。
一、首先、使用Highcharts能快速、简单的做出各种诸如柱状图、饼状图、曲线图等多种形式的统计图或者走势图。使用者只需要提供对应的数据、以及简单的Highcharts的配置即可。使用简单。
二、跨语言跨平台支持多种浏览器。Highcharts是基于js制作出来的。是一个js类库。无论你使用什么后端语言，都可以很方便的使用Highcharts来做图表或者统计。
三、使用门槛极低、稍微看一下API都可以做出各种符合要求的统计图表等。
数据灵活。支持xml 和json。

Highcharts是一款开源图表库，开源但不完全免费。Highcharts针对个人用户及非商业用途免费，商业用途需要购买授权。

    若要用HighCharts的话，得先引用它的插件，插件不大，核心文件只有一个highcharts.js文件，可以去HighCharts官网上去下载：

 !--highcharts核心文件-- 

 script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js" /script 

 !--导出需要引用的文件-- 

 script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js" /script 

    在js中定义如何接受数据，和如何显示表格的样式，highcharts的这些样式都是可以通过js控制的，因为highcharts本身就是用JavaScript编写的一个图表库。在这里我只是用饼形图，和柱状图做例子。

//图标分析公用部分--同时显示两个图表（饼型和柱状）

function chartAnalyze(Result,title){

 /* alert(data); */

 var strJson = Result;

 var data = [];

 for ( var i in strJson) {

 var serie = new Array(strJson[i].name, strJson[i].count);

 data.push(serie);

 PieChart(data,title);

 ColumnChart(data,title);

//图标分析公用部分--只显示一个图表（柱状）

function scoreAnalyze(result,title){

 var strJson = Result;

 var data = [];

 for ( var i in strJson) {

 var serie = new Array(strJson[i].name, strJson[i].count);

 data.push(serie);

 ColumnChart(data,title);

function PieChart(series,title) {

 $(#pieChart).highcharts({

 chart : {

 plotBackgroundColor : null,

 plotBorderWidth : null,

 plotShadow : false

 credits : {

 enabled : false,

 title : {

 text : title

 tooltip : {

 pointFormat : {series.name}: b {point.percentage:.1f}% /b 

 plotOptions : {

 pie : {

 allowPointSelect : true,

 cursor : pointer,

 dataLabels : {

 enabled : true,

 format :  b {point.name} /b : {point.percentage:.1f} %

 showInLegend : true

 series : [ {

 type : pie,

 data : series

//柱状图

function ColumnChart(series,title) {

 $(#columnChart).highcharts({

 chart: {

 type: column,

 credits: {

 enabled: false,

 title: {

 text: title

 xAxis: {

 categories: [

 labels: {

 rotation: -45,

 align: right,

 style: {

 fontSize: 13px,

 fontFamily: Verdana, sans-serif

 yAxis: {

 min: 0,

 title: {

 text: 总数

 legend: {

 enabled: false

 tooltip: {

 pointFormat: 数量,

 series: [{

 name: Population,

 data: series,

 dataLabels: {

 enabled: true,

 rotation: -90,

 color: #FFFFFF,

 align: right,

 x: 4,

 y: 10,

 style: {

 fontSize: 13px,

 fontFamily: Verdana, sans-serif,

 textShadow: 0 0 3px black

}

    js接受从后台传到界面上的json对象，然后绑定到图表上进行显示。秀一下最终的结果。

    现在对于highcharts的使用也只是处于会用的阶段，具体每一种图表在哪一种场景下使用还是不确定的，在后面的博客中会进行深入的研究！期待！

svelte教程（1）简介 什么是svelte? Svelte是用于构建快速Web应用程序的工具。 它类似于React和Vue这样的JavaScript框架。但是有一个关键的区别：Svelte在构建时将您的svelte代码转换为理想的JavaScript 代码，而不是在运行时解释您的代码。
在上一章节中，我们列举了在Vue中能用但在mpvue中不能用或需要特别注意的特性，在实际开发前了解一下还是很有必要的，可以避免浪费找错误的时间。 如果你使用过原生的小程序框架，你一定经历过或思考过怎么解决以下的问题： 怎么存放可全局访问的变量？ 页面...
在上一章节中，我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中，我们应该以组件的思维去设计每个小程序的功能页面，对其进行合理的组件拆分，让每个部分都保持功能简洁、条理清楚、各司其职，这样会让代码变得更易理解和维护，间接的也提升了代码的健壮性，降低出现Bug的几率，即使出现Bug，也会更容易进行定位和调试。
在上一章节中，我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍，然后从头开始配置和编写了一个可以运行的小程序页面，算是正真走上了使用mpvue开发小程序的第一步。
【注意事项】由于mpvue也在不断的开发演进，大家在不同时间段使用的时候，可能会遇到和文中的做法不一样的地方。请关注文章的评论区中大家的讨论，寻找解决方案，或者及时查阅官方文档，避免陷入版本更新的坑里哦。