Highcharts Marimekko 图表刷新

2024-04-20

下面的脚本构建了一个基本的 Marimekko 图表,其中 x 值是累积的。作为一种令人兴奋的绘制数据的方式,这是非常棒的。http://jsfiddle.net/Guill84/1o926coh/ http://jsfiddle.net/Guill84/1o926coh/

不幸的是,当您切换图例中的区域时,脚本只是“隐藏”相关区域,这意味着图表中存在间隙。如何修改此脚本,以便每次切换图例中的按钮时重新计算“allSeries”数组?

重复并希望澄清我所追求的内容:想法是,如果我删除绿色区域,那么黑色和橙色系列应该相邻。

$(function () {
    var rawData = [
        { name: 'A', x: 5, y: 5.6 },
        { name: 'B', x: 3, y: 10.1 },
        { name: 'C', x: 11, y: 1.2 },
        { name: 'D', x: 2, y: 17.8 },
        { name: 'E', x: 8, y: 8.4 }
    ];

function makeSeries(listOfData) {
    var sumX = 0.0;
    for (var i = 0; i < listOfData.length; i++) {
        sumX += listOfData[i].x;
    }
    var allSeries = []
    var x = 0.0;
    for (var i = 0; i < listOfData.length; i++) {
        var data = listOfData[i];
        allSeries[i] = {
            name: data.name,
            data: [
                [x, 0], [x, data.y],
                {
                    x: x + data.x / 2.0,
                    y: data.y,
                    dataLabels: { enabled: false, format: data.x + ' x {y}' }
                },
                [x + data.x, data.y], [x + data.x, 0]
            ],
            w: data.x,
            h: data.y
        };
        x += data.x + 0;
    }
    return allSeries;
}

$('#container').highcharts({
    chart: { type: 'area' },
    xAxis: {
        tickLength: 0,
        labels: { enabled: true}
    },
    yAxis: {
        title: { enabled: false}
    },
    plotOptions: {

        area: {
            lineWidth: 0,
            marker: {
                enabled: false,
                states: {
                    hover: { enabled: false }
                }
            }
        }
    },

    series: makeSeries(rawData)
});

});

让我知道你的想法!

原脚本:如何更改高图中条形的宽度? https://stackoverflow.com/questions/13058195/how-can-i-change-the-width-of-the-bars-in-a-highchart


再次感谢 Pawel,这确实是问题的答案。

一个可能的解决方案看起来有点像这样:

legendItemClick: function () {
                    var pos = this.index;
                    var sname = this.name;
                    var chart = $('#container').highcharts();
                    while(chart.series.length > 0)
                    chart.series[0].remove(true);
                    rawData[pos]= { name: sname, x: 0, y: 0 };        
                    ... then update the series with the new array  
                              }     
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts Marimekko 图表刷新 的相关文章

随机推荐

  • 如何阻止 parseFloat() 将零剥离到小数点右侧

    我有一个函数 用于从字符串中删除不需要的字符 定义为货币符号 然后将值作为数字返回 返回值时 我进行以下调用 return parseFloat x 我遇到的问题是 当 x 0 00 时 我期望得到 0 00 带有两位小数的浮点数 我得到的
  • HQL(Hibernate)如何检查一个元素列表是否是另一个列表的子集?

    我很难创建一个 HQL 查询来检查表 X 的记录 a 列表是否包含在同一表 X 的另一个列表 b 中 这是我正在使用的一个例子 select r from Role r where select p from Permission p wh
  • 表单验证禁用提交按钮,直到 WPF 中的所有字段均已填写

    鉴于 WPF 4 0 基于桌面的应用程序 基本输入形式有两个TextBox字段和提交按钮 XAML 代码
  • Visual Studio 2017 不突出显示错误

    我最近从 Visual Studio 2012 升级到 2017 更新到版本 15 3 5 并且 IDE 出现一些问题 在某个项目中 我没有得到错误下划线 在错误列表窗格中 仅构建 实际上显示more比 Build IntelliSense
  • 合并两个具有相同数字键的 PHP 数组[重复]

    这个问题在这里已经有答案了 尝试合并具有相同数字键的两个数组时遇到一些困难 我努力了array merge and array merge recursive 但似乎所做的只是附加第二个数组 第一个数组具有以下形式 Array 384 gt
  • 编辑时更改 NSTextField 边框和 BG 颜色

    我有一个NSTextField显示时不使用边框和窗口背景颜色 但我希望在编辑时将其更改为具有默认边框和白色 BG 颜色 我知道我可以通过以下方式更改这些属性 nameTextField bezeled true nameTextField
  • 加速 solr 索引

    Solr 索引花费的时间太长 我使用的mysql有超过3000万条记录 我正在使用两级子查询 请向我建议索引数据的最佳实践 以便我可以加快该过程 查看Solr性能因素 http wiki apache org solr SolrPerfor
  • java中的验证码[重复]

    这个问题在这里已经有答案了 我想尝试用 Java 开发一个安全登录系统 我应该如何使用 Java 实现 CAPTCHA 我在 Java 中使用的三个验证码库是 JCaptcha 这是三者中最可配置的 并且有很好的文档记录 但无论如何 我们似
  • 使用 HTTPS 链接与 php 方法(file_get_contents、getimagesize)

    当我尝试读取网站中的某些 HTTPS 网址时遇到问题 如果我使用 http 则没有问题 使用file get contents和curl 但是当我用 https 替换 http 时 这些方法不起作用 我收到一些错误 failed to op
  • 调整 R Markdown PDF 文档中文本和块输出之间的间距

    我无法理解如何控制 R Markdown PDF 文档中文本和块输出之间的间距 下面是一个文档的示例 output pdf document setlength lineskip 0pt begin center Random Text e
  • UICollectionView - 在单元格之间画一条线

    如何在 UICollectionView 中的单元格之间绘制一条跨越空间的线 预期的输出是这样的 我所做的最好的事情就是在每个单元格内添加行 如何连接穿过空间的线 我做了一个扩展 你可以像这样使用 collectionView drawLi
  • 使用 Jackson 序列化类型化集合时出错

    我正在尝试使用混合序列化集合 但杰克逊不会保存类型信息 这是一个基本测试 说明会发生什么 public class CollectionSerializationTest interface Common extends Serializa
  • GitHub Actions 使用从 shell 设置的变量

    Goal 在 GitHub Actions 中 从 shell 动态定义我的提交消息 name Commit changes uses EndBug add and commit v7 with message added on date
  • Golang:带有 -> 字符的命令行参数

    我需要接受命令行参数来运行以下格式的 Go 程序 go run app go 1 gt A 我在用os Args 1 但它只接受到 1 gt A 被跳过 非常感谢任何解决此问题的帮助 Thanks 你的 shell 正在解释 gt as I
  • 如何获取时间。立即勾选

    我有一个迭代循环 直到作业启动并运行 ticker time NewTicker time Second 2 defer ticker Stop started time Now for now range ticker C job err
  • 什么更快?循环或多个 if 条件

    我想知道什么更快 是只用一条指令 即 1 1 执行 9 次 for 循环还是执行 9 个 if 条件时 我认为 if 更快 因为您不需要检查循环中的指令 它应该几乎相同 因为for循环本质上是检查if条件为真并运行一段代码 非常类似于if声
  • iOS:如何检测摇动动作?

    我将以下代码添加到我的 appDelegate m void motionBegan UIEventSubtype motion withEvent UIEvent event void motionEnded UIEventSubtype
  • 条件表达式的 raise 语句

    我如何优雅地实现 武士原则 http c2 com cgi wiki SamuraiPrinciple 胜利归来 或者根本不归来 关于我的职能 return
  • Java中一个字符是1字节还是2字节?

    我认为 java 中的字符是 16 位 如建议的那样java doc http download oracle com javase tutorial java nutsandbolts datatypes html 字符串不也是这样吗 我
  • Highcharts Marimekko 图表刷新

    下面的脚本构建了一个基本的 Marimekko 图表 其中 x 值是累积的 作为一种令人兴奋的绘制数据的方式 这是非常棒的 http jsfiddle net Guill84 1o926coh http jsfiddle net Guill