Highcharts 进度条形图

2024-02-19

是否可以在 Highcharts 中创建这样的进度图表:

https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg

我相信可以定制条形图来创建它。但是是否可以更改样式,以便不显示任何轴,并且条形标签位于条形上方而不是它们之前?


可以重新创建,但它不是那么动态(在风格上)。所以你必须调整css根据图表中的数据系列。

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'bar',

    marginBottom: 120
  },
  legend: {
    enabled: false
  },
  colors: ['#173c64'],
  xAxis: {
    categories: ['option 1', 'option 2', 'option 3', 'option 4 ', 'option 5 '],
    labels: {
      align: 'left',
      x: 5,
      y: -20, /* to be adjusted according to number of bars*/
      style: {
       fontSize: "1rem",
        color: '#000'
      }
    },
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
    title: {
      enabled: false
    }

  },
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0,
    title: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      stacking: "normal",
      //groupPadding: 0, //add here
      //pointPadding: 0, //add here,
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  title: {
    margin: 0,
    useHTML: true,
    text: "Test",
    style: {
      "color": "#333333",
      "fontSize": "1.5rem",
      "fontWeight": "bold"
    }
  },

  series: [{
    data: [{
      y: 100,
      color: '#99ddff'
    }, {
      y: 10,
      color: '#ff8c1a'
    }, {
      y: 20,
      color: '#ff471a'
    }, {
      y: 60,
      color: '#c299ff'
    }, {
      y: 10,
      color: '#99ddff'
    }]
  }]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts 进度条形图 的相关文章

  • 如何在 HighCharts 上绘制垂直线?

    我想追踪当天的垂直时间线 但我没有在 HighCharts 文档中找到解决方案 像这样 您正在寻找情节主线 请参阅此处的文档 http api highcharts com highcharts xAxis plotLines http a
  • 如何从高图表中删除“值”和“系列”?

    I m using highcharts on my website which looks great but I now want to remove these two labels from the chart 我尝试禁用各种标签
  • Highcharts 散点图中的单个点颜色

    请尝试以下代码 div style height 400px div and function var chart new Highcharts Chart chart renderTo container type column seri
  • jQuery Highcharts:使用下拉列表更改图表类型

    我正在尝试更改图表的值 如下所示
  • Highcharts 日期时间本地化

    有人可以告诉我如何本地化在 HighCharts js 文件中硬编码的日期相关字符串吗 例如 我希望图表显示本地化值 F v 而不是 x 轴中默认的 二月 日期标签 我尝试在实例化图表之前通过在语言对象上设置选项来实现本地化 Highcha
  • 将 Highcharts 最大 Y 值设置为精确值而不进行四舍五入

    每次我在 Highcharts 中设置最小值和最大值时 我都不会得到具有我发送的精确最小值和最大值的图表 但总是有些接近的值 似乎 Highcharts 正在为轴选择一个间隔范围 如果我的最大值不符合正确的间隔 它就会被忽略或四舍五入 例如
  • 在同一页面上同时使用 highcharts 和 highstock

    希望有人能帮忙 我尝试在单个页面上使用 highcharts 和 highstock 从 CDN 加载 最初我设置了各种 highcharts 带向下钻取的仪表和条形图 并使用以下所有内容都工作正常
  • Highcharts 同步图表显示工具提示

    我想在同步图表中显示工具提示 请看这个Jsfiddle http jsfiddle net 51zdn0jz 5 container bind mousemove touchmove touchstart function e var ch
  • 禁用 HighCharts 上的悬停

    我使用 HighCharts 库构建了一个饼图 这是我的图表 http jsfiddle net t2MxW 20890 var chart new Highcharts Chart colors 0072BC BFDAFF DDDF00
  • Highchart x 轴标签显示双日期

    我在我的项目中使用 highcharts 它在 x 轴上显示两次日期 如何删除它并在 x 轴上仅获取 1 个日期 Here is the snapshot of how it looks like right now 我怎样才能摆脱双日期显
  • HighCharts 全宽问题

    我试图让渲染的图表填充 100 的父 div 但没有成功 有什么办法可以消除左右两侧的缝隙吗 http jsfiddle net sKV9d http jsfiddle net sKV9d var chart new Highcharts
  • Highcharts重绘不重绘数据

    我一直在玩Highcharts v3 0 10 在网页上呆了一周 打印页面时无法重新绘制图表 问题是我在图表中使用深色背景颜色 但在打印时 我想将其更改为白色 为了实现这一点 我需要redraw 更改后我的图表backgroundColor
  • HighChart:多个图表的绘图线单击事件

    我正在使用 highchart 来实现一些向下钻取功能 我有一个功能可以让用户单击面积图并添加一条线 但后来我发现我的函数有一个错误 这些图表之间应该只有一条红线 但是当用户单击另一个图表时 第一个图表上的现有红线不会被删除 以下是我分享的
  • 如何在 R 中设置 highchart 全局选项

    我在 javascript 中看到了很多示例 但我找不到在 R 中执行此操作的示例 这是 API 链接 http api highcharts com highcharts global http api highcharts com hi
  • 如何在highcharts中设置动态数据

    我正在从 servlet 获取数据 我从 servlet 发送的 json 对象的 sysout 是 jsonArray bugzilla 20 redmind 14 现在我的java脚本是
  • 如何使用 JavaScript 动态更改 Highcharts 中的数据点

    我正在尝试改变现有系列中的一个点 通过查看 API 我一直在尝试以下操作 chart series 0 data 0 y 43 chart redraw 我确信我错过了一些简单的东西 但我无法弄清楚 感谢您的帮助 您不能只设置该值 Char
  • Highcharts:仅针对单个系列的工具提示

    我的系列中有 3 个数据集 低 正常 高 显示在散点图上 如何强制仅对普通数据集启用工具提示和标记 非常感谢 格式化程序 功能用于格式化工具提示文本的回调函数 返回 false 以禁用系列上特定点的工具提示 参考 http api high
  • 使用 Highcharts 和 React 创建条形图 - 出现未找到渲染 div 的错误

    我正在尝试在我的 Web 应用程序中使用 Highcharts 创建条形图 该应用程序在前端使用 React 下面是我的仪表板 tsx 文件的片段 我基本上只是从 JSFiddle 复制并粘贴了代码 http jsfiddle net 8q
  • Highcharts.js 中的列之间的空间

    我有一个柱形图 其中对于每个 X 值我有两个系列 但该图显示每个 X 值之间的间距很宽 在 Highchart 中如何使列和 y 轴之间有 1px 的空间 Update pointPadding 0 2 to pointPadding 0
  • 加载 highchart 时 Android 错误膨胀类

    我正在尝试加载highcharts via Dialog 下面是我的代码 Gradle implementation com highsoft highcharts highcharts 9 0 1 XML

随机推荐

  • 遍历/迭代任意深度的嵌套字典(字典表示目录树)

    在撰写本文时 Python 新手 出现这个问题是因为我希望用户能够从一个目录 以及任何子目录 中选择一组文件 不幸的是 Tkinter 在文件对话框中选择多个文件的默认功能在 Windows 7 上被破坏了 http bugs python
  • 取两个可为空值中的较大者

    假设我有两个可为空的整数 int a 10 int b 20 我想取最大的非空值 这样如果两个值都为空 则结果为空 我可以写一些冗长的东西 例如 int max if a null max b else if b null max a el
  • 控制器规范中的 RSpec 存根辅助方法

    发现类似的问题 但令人惊讶的是 我发现没有一个给出简单的答案 尝试在我的控制器规范中存根辅助方法 不太确定哪个对象需要加倍 控制器调用此方法 app helpers sessions helper rb def signed in curr
  • 在 Java 中将 XML 作为字符串读取

    有人可以帮我解决这个问题吗 我想知道如何将这个示例读取为字符串 我知道如何阅读第一个 但不知道如何阅读所有内容 tr tr
  • 如何声明具有多个具有非平凡关系的泛型类型的成员?

    这是我想在我的java代码中编写的内容 private a R extends Result gt MyType a
  • TlbImp.exe 无法注册 lib 文件:“.dll 不是有效的类型库”

    该 dll是FKAtend dll 附带生物识别设备的VB6 0 SDK 该 dll在VB6 0环境下工作正常 但是 当尝试在另一台具有 VS NET 环境的 PC 上注册它时 出现上述错误 我们使用 dependency walker 检
  • 通过在 MATLAB 中计算平均值进行下采样

    假设我有一个包含 44100 个样本的文件 采样频率为 fs 44100 Hz 所以我的文件是 1 秒长 我想将其下采样到 8 Hz 的采样频率 但我不想通过获取每个 44100 8 5512 5 样本并将其保存在新数组中来实现此目的 但通
  • 构建无法从 VisualStudio 运行,但可以从 msbuild 运行

    从 Visual Studio 中的全新控制台应用程序模板中 我编辑了 csproj构建另一个这样的项目
  • 单选按钮多项选择

    我有许多具有不同名称属性的单选按钮 我面临一个问题 每次我单击每个单选按钮时 我都可以选择全部 我正在使用单选按钮重定向到其他页面 我不想只选择一项 我正在使用 twitter bootstrap 选项卡在一页上显示多个内容 只需切换选项卡
  • 未捕获对象错误:无法注入 ngAnimate

    当我尝试像这样注入 ngAnimate 时 我无法实例化我的应用程序 var app angular module musicsa ngCookies ngResource ngSanitize ui router firebase ngA
  • 基本日期之间查询 $gte、$lte 等

    我在 mongo 查询的正确时间格式方面遇到问题 我的问题是 Is time Timemongo ISODate 对象的正确 go 类型 为什么我的时间解析似乎解析完全不同的日期 这是我正在做的事情的完整示例 package main im
  • 如何使用 ngrok 托管 HTML 文件?

    是否可以使用 NGROK 托管 HTML 文件 而不是 Web 应用程序 我真的对 NGROK 一无所知 我只是用它来托管 Twilio 应用程序的服务器 并且想用它来托管我的另一个项目的 HTML 文件 另外 有人知道如何在 Mac 上创
  • CSS 转换在 IE 中不起作用

    我无法在 IE 或 Firefox 中实现此转换 但在 Safari 和 Chrome 中看起来不错 不透明度显示但是即时的 对我来说 下面的 CSS 看起来是正确的 但我看不出它有任何理由可以在 IE 或 Firefox 中工作 我已经使
  • 我在编译时遇到找不到符号错误

    import java io File import java io BufferedReader import java io InputStreamReader import java io import java io InputSt
  • 如何通过 URL 访问 Jenkins 在 lastSuccessfulBuild 中创建的工件?

    我正在使用 Jenkins 管道构建 Android 应用程序 构建成功完成后 它会创建一个 apk 文件 我希望 QA 团队的成员能够下载此文件并在将其上传到 Google 商店之前测试该应用程序 因此我希望这些用户 有权访问 Jenki
  • 将项目添加到不可变的 Seq

    假设我有一个字符串序列作为输入 我想获得一个新的不可变的Seq它由输入的元素和一个项目组成 c 以下是我发现有效的两种方法 assert Seq a b c Seq a b Seq c 这个的问题是 似乎实例化了一个临时序列 Seq c 只
  • tkinter:无法进入条目小部件

    我不明白为什么下面的输入框rackGUI py在我的代码中是静态的 不允许输入任何内容 我相信所有的Entry对象被正确实例化 我将文本变量指定为StringVar 我的直觉告诉我问题在于命令参数create button实例化 但我不太确
  • Jsoup 未下载整个页面

    网页是 http www hkex com hk eng market sec tradinfo stockcode eisdeqty pf htm http www hkex com hk eng market sec tradinfo
  • IdentityServer4分别对每个客户端进行身份验证

    我使用两个不同的客户端 IdentityServer4提供API保护和登录表单 我可以配置客户端以避免单点登录吗 我的意思是 即使我登录了第一个客户端 我也需要登录第二个客户端 我的ID4配置 internal static IEnumer
  • Highcharts 进度条形图

    是否可以在 Highcharts 中创建这样的进度图表 https 0 s3 envato com files 84221450 screenshots weblator responsive charts 7 bootstrap jpg