1. 云栖社区>
  2. PHP教程>
  3. 正文

highcharts通过ajax获取数据可点击数据02

作者:用户 来源:互联网 时间:2017-11-30 15:49:19

ajax数据highcharts获取通过

highcharts通过ajax获取数据可点击数据02 - 摘要: 本文讲的是highcharts通过ajax获取数据可点击数据02, 线状图-ajax <script type="text/javascript"> // Get the CSV and create the chart $.getJSON('https://www.highcharts.c

线状图-ajax

<script type="text/javascript">

// Get the CSV and create the chart $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {

Highcharts.chart('container', {

data: {csv: csv //csv返回值 },

title: {text: 'Daily visits at www.highcharts.com' //标题 },

subtitle: {text: 'Source: Google Analytics'//副标题 },

xAxis: {tickInterval: 7 * 24 * 3600 * 1000,// 时期时间轴 基于毫秒tickWidth: 0,//刻度宽度gridLineWidth: 1, //网格线宽度labels: { //轴标签align: 'left', //对齐方式x: 3, //水平偏移y: -3 //竖值偏移} },

yAxis: [{ //y轴title: {text: null},labels: { align: 'left',x: 3,y: 16,format: '{value:.,0f}'},showFirstLabel: false//是够显示第一个标签 }, { // right y axislinkedTo: 0,//关联gridLineWidth: 0, //网格线宽度opposite: true,//对象显示title: {text: null},labels: {align: 'right',x: -3,y: 16,format: '{value:.,0f}'//格式化 如将y轴的 竖值单位设置为 工资 ?k format'{y} k'},showFirstLabel: false}],

legend: {//图例align: 'left',//对齐方式 --水平在左verticalAlign: 'top',//在上面显示y: 20,//向y轴偏移floating: true,//悬浮borderWidth: 0 },tooltip: {//数据提示框数据是否一同显示shared: true,//十字准线 已废弃 crosshairs: true },

plotOptions: { //对每个系列的类型进行处理series: { //数据列cursor: 'pointer',//游标类型 point: {//数据点事件events: {click: function (e) { hs.htmlExpand(null, { pageOrigin: { x: e.pageX || e.clientX, y: e.pageY || e.clientY }, headingText: this.series.name, maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':
' + this.y + ' visits', width: 200 });}}},marker: {lineWidth: 1}} },

series: [{name: 'All visits',lineWidth: 4,marker: {radius: 4} }, {name: 'New visitors' }], responsive: {//响应规则rules: [{condition: {maxWidth: 600},chartOptions: {legend: {verticalAlign: 'bottom',y: 0,floating: false}}}] } }); }); </script>

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax , 数据 , highcharts , 获取 , 通过 ,以便于您获取更多的相关知识。