首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >样式高图x和y轴

样式高图x和y轴
EN

Stack Overflow用户
提问于 2013-12-12 02:34:11
回答 2查看 2.3K关注 0票数 4

我被一个问题困住了,找不到更进一步的办法。我试着用高图集来整理图表。但无法显示左侧的右百分比值,并在底部和左侧行上显示一些样式,因此在第一个屏幕中它们看起来会很像。同样的问题,我在底部标签下的勾号,他们似乎不能被移动到顶部,所以他们将覆盖底线的中间。

它必须是这样的:

这就是我到目前为止所做的:

下面是我的代码的外观:http://jsfiddle.net/8Wp7k/

和高图表设置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$j('.investor-calculator .chart-container .chart').highcharts({
    title: {
        text: '',
        x: -20 /*center*/
    },
    background: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        },
        stops: [
            [0, 'rgb(96, 96, 96)'],
            [1, 'rgb(16, 16, 16)']
        ]
    },
    subtitle: {
        text: '',
        x: -20
    },
    xAxis: {
        categories: ['Янв', 'Мар', 'Май', 'Июл', 'Сен', 'Ноя'],
        tickmarkPlacement: 'on',
        tickColor: '#d2d2d2',
        gridLineColor: '#eee',
        tick: false
    },
    yAxis: {
        title: null,
        tickPosition: 'inside',
        gridLineDashStyle: 'longdash',
        lineColor: '#d2d2d2',
        lineWidth: 1
    },
    tooltip: {
        valueSuffix: null
    },
    series: [{
        name: 'Some Name',
        data: [1.0, 6.9, 2.5, 8.5, 1.0, 12.5]
    }],
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    colors: ['#e0502f'],
    plotOptions: {
        series: {
            lineWidth: 4,
            marker: {
                enabled: false
            }
        }
    }
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-12-12 02:48:25

若要移动x轴标签,请向x轴添加如下内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 labels:{
        y:25
 }

对于y轴,可以强制勾选间隔为5%,并将标签格式化如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    tickInterval: 5,
    labels: {
        format: '{value} %'
    }

http://jsfiddle.net/Kd5k7/

再做几处调整:

您可以使用偏移量移动轴位置,例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 yAxis: {
        min:-4,
        startOnTick:false,
        offset:-20

min和startOnTick强制y轴从-4开始,但不会打印标签,因为min不是倍数if 5。

http://jsfiddle.net/P9M3t/

票数 2
EN

Stack Overflow用户

发布于 2013-12-12 02:43:59

对于Y轴标签,你需要用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        labels: {
            format: '{value} %'
        },
        tickInterval: 5

小提琴

对于滴答的位置,你被限制在‘内部’或‘外部,根据文件,他们不能跨越x轴。

至于轴线交叉,史蒂夫P有这个答案。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20541051

复制
相关文章
origin双y轴柱状图_双Y轴柱状图和折线图
做双Y轴柱状图时,一开始是将左Y轴数据和右Y轴数据放在了两个sheet中,一顿操作最后发现两个柱要么重合要么有间距,怎么调都不行,就像下图这样。。。
全栈程序员站长
2022/11/10
1.8K0
origin双y轴柱状图_双Y轴柱状图和折线图
echart 双折线 双Y轴, 折线,柱形 双Y轴图
双折线图 双Y轴 双坐标系坐标 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: [ {name: '数值',type: 'value', interval: 300, position:'left'}, {type: 'value', pos
拿我格子衫来
2022/01/24
1.9K0
echart 双折线 双Y轴, 折线,柱形 双Y轴图
origin如何绘制双y轴柱状图_Graphpad柱状图双Y轴
tips:origin横坐标的标注如何修改成双行显示呢? shift+enter,可以换行
全栈程序员站长
2022/11/11
3.3K0
origin如何绘制双y轴柱状图_Graphpad柱状图双Y轴
「R」ggplot2 修改x和y轴刻度
这个R tutorial描述如何使用ggplot2包修改x和y轴刻度。同样,该文包含如何执行轴转换(对数化,开方等)和日期转换。
王诗翔呀
2020/07/02
9.8K0
「R」ggplot2 修改x和y轴刻度
Echarts折线图的x和y轴坐标颜色修改
继续对Echarts的属性进行探索,关于如何修改Echarts的x和y轴坐标颜色的问题,继续看,主要修改代码的地方:
王小婷
2019/08/20
6.9K0
Matlab绘制包含双Y轴的图
创建左右两侧都有 y 轴的坐标区。yyaxis left 命令用于创建坐标区并激活左侧。后续图形函数(例如 plot)的目标为活动侧。绘制数据对左侧 y 轴的图。
用户9925864
2022/07/27
2.1K0
Matlab绘制包含双Y轴的图
【技巧】GraphPad Prism柱状图Y轴截断
从上表可以看出,A组、B组的数据明显比C组、D组、E组要大,这种差异较大的数据做出的柱状图效果如下:
Mark Chen
2020/07/20
37.2K0
matlab绘制figure的x y轴特殊标签数据
做数据分析的Matlab用户最常见的问题之一是如何在日期轴上绘制数据。很多时候,分析师最初会使用Excel处理数据,然后用相应的工具去处理数据,分析数据。Excel有一种在日期轴上绘制数据的简单方法,但在Matlab中使用日期轴需要麻烦一点。但matlab针对这种特殊情况也有对应的一些函数,使用Matlab完成这项任务并不难,而且和大多数Matlab函数一样,它具有相当大的通用性。
用户9925864
2022/12/16
3K0
matlab绘制figure的x y轴特殊标签数据
python双Y轴
import matplotlib.pyplot as plt import numpy as np x = np.arange(0., np.e, 0.01) y1 = np.exp(-x) y2 = np.log(x) fig = plt.figure() sns.set_style('white') ax1 = fig.add_subplot(111) ax1.plot(x, y1) ax1.set_ylabel('Y values for exp(-x)') ax1.set_title("Dou
用户1359560
2018/08/27
1.3K0
python双Y轴
【Python】pyecharts 模块 ⑥ ( 绘制柱状图 | pyecharts 绘制柱状图步骤 | 柱状图 x 轴 / y 轴 翻转 | 柱状图数据标签位置设置 )
首先 , 导入 柱状图 Bar 类 , 该类定义在 pyecharts.charts 模块中 ;
韩曙亮
2023/10/11
1.3K0
【Python】pyecharts 模块 ⑥ ( 绘制柱状图 | pyecharts 绘制柱状图步骤 | 柱状图 x 轴 / y 轴 翻转 | 柱状图数据标签位置设置 )
如何用R绘制双y轴柱状图
绘制上面这个漂亮的图,要注释以下3点: 1. 双y轴 2. 颜色渐变 3. 横坐标的label对齐 代码及解释如下: library(RColorBrewer) # 载入颜色包 par(mar=c(5
生信交流平台
2020/08/05
2.6K0
如何用R绘制双y轴柱状图
echarts实现多个y轴
在日常画图,如柱形图、折线图这些图表,需要两组或者两组以上不同的数据,且数据的大小有一定的差异时,通常是需要用两个y轴来体现的。
算法与编程之美
2022/02/17
1.9K0
Echarts多Y轴探索
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
孟君
2019/09/24
4.8K0
Echarts多Y轴探索
【R语言】如何绘制截断Y轴的柱形图
在绘制柱形图的时候, 我们经常会遇到Y轴部分数据范围很广的情况。有些数值很大,但是有些有非常小,不在一个尺度范围内。如果直接使用最大值作为y轴的范围,那么那些数值很小的柱子就会显得很矮,画出来的图会很难看。遇到这种情况我们该如何处理呢?今天就给大家分享一下截断Y轴的柱形图。
生信交流平台
2022/09/21
2.2K0
【R语言】如何绘制截断Y轴的柱形图
origin多因子柱状图双y轴_origin并列柱状图
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/19
2.3K0
origin多因子柱状图双y轴_origin并列柱状图
如何绘制一个figure中有一个x轴,三个y轴?
1、点击[命令行窗口] 2、按<Enter>键 3、点击[命令行窗口] 4、按<Enter>键
裴来凡
2022/05/28
1.2K0
如何绘制一个figure中有一个x轴,三个y轴?
echarts的双y轴显示
第一步: 引入echarts import echarts from "echarts"; Vue.prototype.$echarts = echarts //引入组件(全局引入) 第二步: id绑定 <div id="pie"> /// pie 用于存放所要绘制的图形 第三步: 配置options,创建echarts实例 option1: { title: { text: "双坐标轴事例", //标题 show: f
用户4344670
2019/08/28
4.9K0
Echarts设置y轴值间隔
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些。
王小婷
2019/03/22
9.2K0
Echarts设置y轴值间隔
Stata | 调整 Y 轴文字顺序
鸽了一个暑假,最近试着渐渐更新起来。今天分享一个被好多强迫症小伙伴问到的问题:用 Stata 画图怎么更改 Y 轴文本的顺序。如下图所示,默认绘图的文字为每个字从左到右,但是一般论文在 Y 轴顶端的由上至下的排列。
PyStaData
2021/09/14
3.3K0
Stata | 调整 Y 轴文字顺序
android之绕Y轴旋转
转自:http://lzyfn123.iteye.com/blog/1426844
forrestlin
2022/04/02
1.1K0

相似问题

高图X轴和y轴

11

高图Y轴需要在X轴上

12

高图以x和y轴偏移为中心

21

高图X轴与随机y值

14

高散度图:x轴和y轴的集合小数。

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文