highcharts去掉x轴,y轴,轴线以及刻度

var chart = null;
$.getJSON(‘https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?‘, function (data) {
    chart = Highcharts.chart(‘container‘, {
        chart: {
            zoomType: ‘x‘
        },
        title: {
            text: ‘美元兑欧元汇率走势图‘
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
            ‘鼠标拖动可以进行缩放‘ : ‘手势操作进行缩放‘
        },
        xAxis: {
            lineWidth :0,//去掉x轴线
            tickWidth:0,//去掉刻度
            labels: {
                enabled: false
            },//去掉刻度数字
            type: ‘datetime‘,
            dateTimeLabelFormats: {
                millisecond: ‘%H:%M:%S.%L‘,
                second: ‘%H:%M:%S‘,
                minute: ‘%H:%M‘,
                hour: ‘%H:%M‘,
                day: ‘%m-%d‘,
                week: ‘%m-%d‘,
                month: ‘%Y-%m‘,
                year: ‘%Y‘
            }
        },
        tooltip: {
            dateTimeLabelFormats: {
                millisecond: ‘%H:%M:%S.%L‘,
                second: ‘%H:%M:%S‘,
                minute: ‘%H:%M‘,
                hour: ‘%H:%M‘,
                day: ‘%Y-%m-%d‘,
                week: ‘%m-%d‘,
                month: ‘%Y-%m‘,
                year: ‘%Y‘
            }
        },
        yAxis: {        tickWidth:0,//去掉刻度
            gridLineWidth: 0,//去掉y轴方向的横线
            labels: {
                enabled: false
            },//去掉刻度数字
            title: {
                text: ‘汇率‘
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get(‘rgba‘)]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        series: [{
            type: ‘area‘,
            name: ‘美元兑欧元‘,
            data: data
        }]
    });
});

原文地址:https://www.cnblogs.com/rachelch/p/8342959.html

时间: 2024-09-29 23:41:47

highcharts去掉x轴,y轴,轴线以及刻度的相关文章

使用HighCharts描绘多个Y轴的动态曲线。

调试了一整天,终于显示出来了. 详细例子参照官网的demo:http://www.hcharts.cn/demo/index.php 在这只贴出关键部分的JS代码 1. chart (就是在events的load里写一个实时获取的方法.通过json调用去后台拉新数据加到series里) 1 chart: { 2 renderTo: 'chart_spline', //图表放置的容器,DIV 3 defaultSeriesType: 'spline', //图表类型为曲线图 4 events: {

echarts-去掉X轴 Y轴和网格线

1.问题背景 如何在echarts中,去掉X轴.Y轴和网格线,只留数据图形 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-去掉X轴.Y轴和网格线</title> <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/as

PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息

一.PhoneGap 加速计 Accelerometer 对象介绍 1.主要方法 accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息 accelerometer.watchAcceleration       定期获取设备的加速度信息 accelerometer.clearWatch      停止定期获取设备的加速度信息 2.参数 accelerometerSuccess 获取加速度信息成功的回调函数 acceleromete

绕X 轴 Y轴 Z轴旋转的结果

void warp_perspect_3_angle(cv::Mat face, float roll, float yaw, float pitch) { cv::Mat face_img = face.clone(); int imgHeight = face_img.rows; int imgWidth = face_img.cols; float alpha, beta, gamma; alpha = pitch * 3.1415926 / 180; beta = yaw* 3.1415

使用flot.js 发现x轴y轴无法显示轴名称

添加此插件解决问题 flot-axislabels https://github.com/markrcote/flot-axislabels

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

玩转FusionCharts:Y轴数字形式(如去掉K)

玩转FusionCharts:Y轴数字形式(如去掉K) 如果运行FusionCharts带的例子,你会发现FusionCharts表中的数字(通常是Y轴)会带上’k’,也就是如20000,会变成20k,如下图所示: 很 显然,你可能并不需要这个k,去掉的方法也很简单,在附带例子对应的xml文件中,设置chart的属性formatNumberScale=’0′即可 去除掉这个’k’了,当然,如果你想保留这个k,那么可以设置form了,当然,如果你想保留这个k,那么可以设置formatNumberS

Highcharts 丢失值区域图;Highcharts 反转x轴与y轴;Highcharts 曲线区域图;Highcharts 区间区域图;Highcharts 使用区间和线的区域图

Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', spacingBottom: 30 }; 实例 文件名:highcharts_area_missing.htm <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教

highcharts设置Y轴范围及根据Y轴范围设置不同颜色

yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: 30, //最小 tickInterval: 10, //步长 max:150,//最大 // 不同Y轴范围设置不同颜色 begin plotBands: [{ from: 30, to: 60, color: 'rgba(168, 255, 213, 0.3)', label: { text:

WPF Toolkit Chart--多Y轴显示

效果: <Window x:Class="Chart.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width=&quo