对于折线图,高图表中的向下钻取功能

2023-12-19

我正在尝试使用可以向下钻取几个级别的高图生成折线图。 Highchart 具有柱形图的此功能,但我找不到折线图的任何内容。如果我尝试将图表类型从列更改为行,那么我会得到一条无法进一步向下钻取的图表。有什么方法可以将钻取功能应用于高图表中的折线图。这是我的代码:

$(function () {
var chart;
$(document).ready(function() {

    var colors = Highcharts.getOptions().colors,
        categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
        name = 'Browser brands',
        data = [{
                y: 55.11,
                color: colors[0],
                drilldown: {
                    name: 'MSIE versions',
                    categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                    data: [10.85, 7.35, 33.06, 2.81],
                    color: colors[0]
                }
            }, {
                y: 21.63,
                color: colors[1],
                drilldown: {
                    name: 'Firefox versions',
                    categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                    data: [0.20, 0.83, 1.58, 13.12, 5.43],
                    color: colors[1]
                }
            }, {
                y: 11.94,
                color: colors[2],
                drilldown: {
                    name: 'Chrome versions',
                    categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                        'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                    data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                    color: colors[2]
                }
            }, {
                y: 7.15,
                color: colors[3],
                drilldown: {
                    name: 'Safari versions',
                    categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                        'Safari 3.1', 'Safari 4.1'],
                    data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
                    color: colors[3]
                }
            }, {
                y: 2.14,
                color: colors[4],
                drilldown: {
                    name: 'Opera versions',
                    categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                    data: [ 0.12, 0.37, 1.65],
                    color: colors[4]
                }
            }];

    function setChart(name, categories, data, color) {
        chart.xAxis[0].setCategories(categories, false);
        chart.series[0].remove(false);
        chart.addSeries({
            name: name,
            data: data,
            color: color || 'white'
        }, false);
        chart.redraw();
    }

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Browser market share, April, 2011'
        },
        subtitle: {
            text: 'Click the columns to view versions. Click again to view brands.'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            column: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            var drilldown = this.drilldown;
                            if (drilldown) { // drill down
                                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                            } else { // restore
                                setChart(name, categories, data);
                            }
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    color: colors[0],
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        return this.y +'%';
                    }
                }
            }
        },
        tooltip: {
            formatter: function() {
                var point = this.point,
                    s = this.x +':<b>'+ this.y +'% market share</b><br/>';
                if (point.drilldown) {
                    s += 'Click to view '+ point.category +' versions';
                } else {
                    s += 'Click to return to browser brands';
                }
                return s;
            }
        },
        series: [{
            name: name,
            data: data,
            color: 'white'
        }],
        exporting: {
            enabled: false
        }
    });
});

});
    </script>
</head>
<body>

请让我知道是否有可行的解决方法。


请查看向下钻取行示例:jsfiddle.net/mv9FV/6/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

对于折线图,高图表中的向下钻取功能 的相关文章

  • 是否可以在 highcharter 地图中包含地图线?

    我想在 highcharter 中使用一组用于县的 borderColor 和宽度值 并使用另一组用于州线的值在这个 jsfiddle 链接中 http jsfiddle net gh get jquery 1 9 1 highslide
  • R 上的实时图表 - Shiny

    我正在尝试制作一个交互式图表 在一个闪亮的应用程序上绘制金融股票数据 我的尝试是不断更新数据 从而更新图表 我使用一个名为 Highcharter 的包来管理这个 下面显示了服务器部分的部分代码 getDataIntraday 接收两个输入
  • Highcharts 日期时间本地化

    有人可以告诉我如何本地化在 HighCharts js 文件中硬编码的日期相关字符串吗 例如 我希望图表显示本地化值 F v 而不是 x 轴中默认的 二月 日期标签 我尝试在实例化图表之前通过在语言对象上设置选项来实现本地化 Highcha
  • 将 Unix 纪元时间戳转换为 JavaScript 日期时间戳

    我有一个带有 Unix 纪元时间戳的数据库 我想在 Highcharts 图表中绘制这些值 这需要 JavaScript 日期时间戳 自 1970 年 1 月 1 日以来的毫秒数 数据库数组当前如下所示 data 1519395624 10
  • 平移多个 Y 轴之一以获取高图

    我是 highchart javascript 的新手 而且我没有样品来展示它 但我见过图表有两个 Y 轴 左轴和右轴 我可以上下拖动一个轴而不影响另一个轴 该图表可能包含一些系列数据 我见过构建的插件 http www highchart
  • highcharts 可以导出图表和表格数据吗?

    我试图弄清楚 highcharts 是否可以执行以下操作 渲染一个标准水平条形图 其中包含其下方的单独表格数据 想象一个条形图下方有一个类似 html 的表格 用户可以使用 highcharts 提供的 exporting js 文件导出整
  • 如何在高图表中放置自定义标签

    我正在尝试执行官方 HighCharts 小提琴中的操作 http jsfiddle net gh get library pure highcharts highcharts tree master samples highcharts
  • HighCharts 全宽问题

    我试图让渲染的图表填充 100 的父 div 但没有成功 有什么办法可以消除左右两侧的缝隙吗 http jsfiddle net sKV9d http jsfiddle net sKV9d var chart new Highcharts
  • Highcharts xAxis 钻取未正确更改

    http jsfiddle net ZBXV7 2 http jsfiddle net ZBXV7 2 when I click a column or label the xAxis write incorrect label but t
  • Highcharts - 图表回流功能的问题

    这是fiddle http jsfiddle net uBUv9 6 我有问题width图表与切换侧边栏 我在SO的帮助下解决了这个问题post https stackoverflow com questions 23602167 issu
  • 如何使用 JavaScript 动态更改 Highcharts 中的数据点

    我正在尝试改变现有系列中的一个点 通过查看 API 我一直在尝试以下操作 chart series 0 data 0 y 43 chart redraw 我确信我错过了一些简单的东西 但我无法弄清楚 感谢您的帮助 您不能只设置该值 Char
  • 使用 Highcharts 和 React 创建条形图 - 出现未找到渲染 div 的错误

    我正在尝试在我的 Web 应用程序中使用 Highcharts 创建条形图 该应用程序在前端使用 React 下面是我的仪表板 tsx 文件的片段 我基本上只是从 JSFiddle 复制并粘贴了代码 http jsfiddle net 8q
  • 使用 html2canvas 将 highcharts 图表渲染为 pdf 在 IE 和 Firefox 上不起作用

    我们使用 html2canvas js 和 html2canvas svg js 版本 0 5 0 beta1 以及 highcharts js 将圆环图下载为 pdf 这在 Chrome 中按预期工作 但在 IE 和 Firefox 中不
  • 创建超过 2 组的高图表密度

    我尝试用两个以上的组创建高图表密度 我找到了一种手动将它们逐一添加的方法 但必须有更好的方法来处理组 示例 我想创建一个类似于下面的ggplot图表的highchart 而不需要将它们一一添加 有什么办法可以做到吗 d f lt data
  • Highcharts 工具提示裁剪

    我正在使用高图表 但遇到了较大的工具提示在 SVG 外部元素处被裁剪的问题 如下图所示 选项useHTML工具提示和 xAxis 设置为 true 因为我正在应用一些自定义 CSS 这些元素 有没有办法让工具提示不被裁剪 我的 highch
  • Highcharts.js 中的列之间的空间

    我有一个柱形图 其中对于每个 X 值我有两个系列 但该图显示每个 X 值之间的间距很宽 在 Highchart 中如何使列和 y 轴之间有 1px 的空间 Update pointPadding 0 2 to pointPadding 0
  • 在 Highcharts (React Native) 上触发点击事件时,无法执行除“警报”之外的任何其他操作

    我在 React Native 中使用 Highcharts 对于条形图 我定义了以下单击事件 plotOptions series cursor pointer point events click gt alert Clicked 我想
  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • jQuery - 系列之外的 HighCharts 标签(条形图)

    function container highcharts chart type bar backgroundColor null width 360 title text null style display none subtitle
  • Highcharts 蜘蛛网标签重叠(顶部和底部)

    我使用 highcharts 创建了蜘蛛网图表 但我在最顶部和最底部的标签中发现了重叠的标签 我尝试包裹它们 也尝试交错标签 但我无法阻止它们重叠 function spiderchartFull highcharts chart pola

随机推荐