如何在饼图中显示图例从一个图表到另一个饼图深入分析highcharts

在Highcharts中，可以通过以下步骤在饼图中显示图例，并进行从一个图表到另一个饼图的深入分析：

创建第一个饼图：
- 首先，引入Highcharts库和相关的CSS文件。
- 在HTML页面中创建一个容器元素，用于显示饼图。
- 使用JavaScript代码初始化一个Highcharts图表对象，并指定容器元素的ID。
- 通过设置图表的类型为饼图（pie）。
- 为饼图添加数据系列（series），包括每个数据点的名称和值。
添加图例：
- 在Highcharts图表对象的配置中，设置图例（legend）的相关属性。
- 可以设置图例的位置、布局、样式等。
- 可以通过设置图例的enabled属性为true来显示图例。
创建第二个饼图：
- 在HTML页面中创建另一个容器元素，用于显示第二个饼图。
- 使用JavaScript代码初始化另一个Highcharts图表对象，并指定第二个容器元素的ID。
- 通过设置图表的类型为饼图（pie）。
- 为第二个饼图添加数据系列（series），包括每个数据点的名称和值。
进行深入分析：
- 在第一个饼图的点击事件中，获取点击的数据点的值。
- 根据点击的数据点的值，更新第二个饼图的数据系列。
- 可以使用Highcharts的API方法，如update、addSeries等来更新图表数据。
- 更新第二个饼图后，可以重新渲染图表，以显示更新后的数据。

以下是一个示例代码，演示了如何在Highcharts中实现从一个饼图到另一个饼图的深入分析，并显示图例：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Pie Chart</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <style>
        #chart-container {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart-container"></div>

    <script>
        // 创建第一个饼图
        var chart1 = Highcharts.chart('chart-container', {
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Pie Chart 1'
            },
            series: [{
                name: 'Data',
                data: [
                    ['Category 1', 30],
                    ['Category 2', 50],
                    ['Category 3', 20]
                ]
            }],
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            }
        });

        // 创建第二个饼图
        var chart2 = Highcharts.chart('chart-container', {
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Pie Chart 2'
            },
            series: [{
                name: 'Data',
                data: [
                    ['Subcategory 1', 10],
                    ['Subcategory 2', 20],
                    ['Subcategory 3', 30],
                    ['Subcategory 4', 40]
                ]
            }],
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            }
        });

        // 饼图点击事件
        chart1.series[0].points.forEach(function(point) {
            point.on('click', function() {
                // 获取点击的数据点的值
                var value = this.y;

                // 更新第二个饼图的数据系列
                chart2.series[0].setData([
                    ['Subcategory 1', value * 0.1],
                    ['Subcategory 2', value * 0.2],
                    ['Subcategory 3', value * 0.3],
                    ['Subcategory 4', value * 0.4]
                ]);

                // 重新渲染第二个饼图
                chart2.redraw();
            });
        });
    </script>
</body>
</html>

在这个示例中，点击第一个饼图的数据点后，第二个饼图的数据系列会根据点击的数据点的值进行更新，并重新渲染图表。

页面内容是否对你有帮助？

有帮助

没帮助

如何在饼图中显示图例从一个图表到另一个饼图深入分析highcharts

javascript、php、laravel、charts、highcharts

我想知道如何才能显示饼图的图例，我现在做了一个柱状图到饼图的深入分析，但是饼图没有图例，我想知道我该如何表达它？我尝试将legend = true设置为true，但它仍然没有显示在饼图中。我也尝试过：饼图：{ allowPointSelect: true，cursor：&#

浏览 2提问于2017-12-15得票数 0

回答已采纳

1回答

多个饼图-同一个图表中的多个饼图与HighCharts

javascript、highcharts、pie-chart

我试图用HighCharts在同一张图表中绘制多个饼图。但我想实现以下两项目标之一，我希望两<em

浏览 1提问于2015-01-12得票数 1

回答已采纳

1回答

如何在highcharts中为特定条形图或饼图添加负值区域或背景？

highcharts

使用highcharts，我如何在柱状图下面放置一个默认的灰色条，例如，像如何对饼图执行类似的操作(如果我的数据占图表的30%，则将剩余的70%显示为浅灰色或类似于表示饼图中未使用的空间)

浏览 0提问于2012-06-20得票数 0

回答已采纳

1回答

如何在不从传说中删除的情况下，在HighCharts中隐藏馅饼图的切片？

javascript、jquery、plugins、charts、highcharts

我只希望能够使用HighCharts启动一个饼图，并隐藏某些切片(就好像它们在图例中被“点击”了一样)。我是在HighStock中这样做的，这是一个简单的问题： var chart = $("#overallChart").highcharts(); //$("#overallChart") is the问题是，当我试图在高图表“饼”图中这样做时，它就不起作

浏览 0提问于2014-04-15得票数 2

回答已采纳

1回答

如何将json数组数据绑定到具有相同画布id的chart.js？

javascript、asp.net、arrays、json、chart.js

} }}; 上面的代码是在相同的canvas id上绘制饼图，但我想绘制不同的饼图，因为json有两个数组对象，但canvas id应该是相同的。循环通过json将得到两个独立的对象，因此我将不得不在表中绘制两个独立的饼图，就像我们在datatable中显示数据的方式一样，同样需要在表行中

浏览 1提问于2017-03-17得票数 0

1回答

链接2种不同类型的highcharts数据

highcharts

是否可以在两种不同类型的图表中链接/同步两种图表数据，以便一次显示工具提示？饼图表示特定浏览器的百分比，面积图显示每个浏览器每年的下载量。我需要做的是，如果有人点击或悬停在饼图的部分，相关的线条和面积图的工具提示应该突出显示…… 因此，当有人在饼</em

浏览 12提问于2016-09-26得票数 0

回答已采纳

1回答

HighCharts饼图-在工具提示中显示多个序列值

charts、highcharts、tooltip、formatter、pie-chart

我想使用HighCharts构建一个饼图，它显示两个值。一个是百分比细分所基于的值-称为单位。另一个值是成本值。我想用标准的饼图，而不是甜甜圈。当点击工具提示时，我希望按照正常情况显示名称值对，例如，五月，15个单位，然后还显示一个$值。例如：highcharts中的饼

浏览 1提问于2014-01-17得票数 0

3回答

饼图中的负值

javascript、reactjs

可以在google饼图中表示负值吗？我有负值的数据，它显示"Negative values are invalid for a pie chart“。有没有办法在饼图中表示负值？

浏览 0提问于2018-11-23得票数 2

3回答

如何在8.1角隐藏高图集的"showInLegend“？

javascript、angular、highcharts

我想切换(隐藏和显示)饼图的传奇在高图表通过点击一个按钮。我用的是角8.1和高图集-角度包装。下面是代码：highcharts: typeof Highcharts = Highcharts; chart: { }.html文件 &l

浏览 0提问于2019-09-03得票数 1

回答已采纳

3回答

高级图表:如何在饼图的图例点击执行一个动作？

jquery、charts、highcharts

伙计们，我在我的应用程序中有一个饼图，这是从我的UI部门得到的。现在，单击图例后，我希望更改饼图“标题”中显示的值。这是给我的图表代码： chart: { backgroundColor: '#f5f7f7', style部门的值为"1“，Administrative Process的

浏览 2提问于2014-06-20得票数 0

回答已采纳

1回答

Chart.js甜甜圈动画/顺时针绘制

chart.js

目前，我的chart.js甜甜圈从顶部开始，顺时针运动。我想反转动画开始在顶部和动画逆时针方向. type: 'doughnut', options: { circumference: 1.6 * Math.PI, animateRotate: true, },});

浏览 3提问于2017-01-22得票数 1

回答已采纳

1回答

高图集(PieChart) -第二次绘图时减少图表宽度

android、jquery、jquery-mobile、charts、highcharts

首先要感谢HighCharts..。嗯，我正在使用HighCharts在jQuery移动中构建一个饼图。我正在显示几个饼图(最多6个图表)，它是根据响应数据在Ajax成功回调中动态创建的。在从document.ready()，创建饼图期间，所有图表都以水平中心显示到屏幕上，这是一个预期的结果。我正在动态地为<

浏览 2提问于2016-08-05得票数 1

回答已采纳

2回答

将django视图python字典转换为highcharts系列数据

django、dictionary、highcharts

我正在尝试找出最干净的方法，将django视图中的python字典放入highcharts中的饼图系列中。具体地说，当我单击页面上一个图表中的一个点时，我正在尝试加载另一个图表，其中包含该点的详细数据。例如，我可能有一个柱状图，上面有“水果”、“肉类”、“蔬菜”的库存。如果我单击一列，第二个图表将显示库存明细。又名第二个“水果

浏览 0提问于2013-06-14得票数 2

回答已采纳

1回答

在rails中使用jQuery和LazyHighCharts

javascript、jquery、ruby-on-rails-3、highcharts

我正在使用创建一个饼图。jQuery代码： <script type="

浏览 2提问于2013-06-19得票数 0

1回答

Symfony3高级图表饼形图空白

symfony、highcharts、pie-chart

今天，我从一个symfony3项目中的高级图表开始，并使线条图工作得很好。我在绘制一个饼形图时遇到了困难，我正拼命想弄清楚为什么它不起作用。如果我在小枝模板中直接在javascript中呈现，我就可以复制基本饼图(比如)，它看起来和预期的一样。但是，如果我试图从我的控制器渲染，我得到一个空白的图像，饼图应该在哪里。我的图表标题在那里，所以我知道我正在渲染到

浏览 1提问于2017-03-13得票数 1

回答已采纳

1回答

Highcharts-legend-item.last()在更改选项卡时消失

javascript、jquery、highcharts、pie-chart

我在我的页面上设置了一个“选项卡容器”，其中包含三个选项卡，每个选项卡包含一个不同的highcharts饼图。它们将根据活动选项卡进行渲染。对于它们中的每一个，我在图例的末尾放了一个总共100%的列，用这个代码； type:'pie', renderTo: 'ctl00_ContentPlaceHolder1span style="float:right&quo

浏览 0提问于2013-05-01得票数 0

回答已采纳

1回答

如何使用amcharts 4在地图中的多个饼图中创建共享图例？

javascript、amcharts

我有一个地图，这是基于amCharts网站上的this示例。我想在这些饼图中添加一个可单击的共享图例。因此，每当有人单击图例元素时，它都会更新所有饼图，使其仅显示“活动”切片值。我尝试这样创建一个自定义图例： // Setting up legendlegend.parent = chart.chartCon

浏览 29提问于2019-02-27得票数 1

回答已采纳

1回答

在Excel中的“饼”中隐藏一系列数据标签

excel、pie-chart

我有几个链接到数据模板的图表--模板中的数据根据所选业务单元的不同而变化。如何在饼图的饼</

浏览 2提问于2014-09-05得票数 1

2回答

在圆环图上定位标签

excel、vba、excel-2016、excel-charts

我有以下代码，它试图将数据标签添加到组合的甜甜圈/饼图中的一个点上： For Each co In .ChartObjects End With Next co 但是，代码在.Position = xlLabelPositionOutsideEnd行中止，并显示错误消息查看图表，标签已添加，但它仍然位于图表

浏览 26提问于2019-03-06得票数 1

1回答

如何使用Highcharts获取所选饼图切片的逗号分隔字符串

javascript、jquery、html、charts、highcharts

我正在修改Highcharts饼图演示，以便在单击饼图切片( MouseClick表示独占选择或Shift-MouseClick表示多选)后，一个单独的span元素会显示所选饼图切片名称的逗号分隔字符串当发生MouseClick时，span元素成功地显示了单击的饼图切片的值。但是，在执行Shift-MouseClick以选择多个切片时，范围仅显示最近选择的

浏览 3提问于2016-01-09得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在饼图中显示图例从一个图表到另一个饼图深入分析highcharts

相关·内容

如何在饼图中显示图例从一个图表到另一个饼图深入分析highcharts

多个饼图-同一个图表中的多个饼图与HighCharts

如何在highcharts中为特定条形图或饼图添加负值区域或背景？

如何在不从传说中删除的情况下，在HighCharts中隐藏馅饼图的切片？

如何将json数组数据绑定到具有相同画布id的chart.js？

链接2种不同类型的highcharts数据

HighCharts饼图-在工具提示中显示多个序列值

饼图中的负值

如何在8.1角隐藏高图集的"showInLegend“？

高级图表:如何在饼图的图例点击执行一个动作？

Chart.js甜甜圈动画/顺时针绘制

高图集(PieChart) -第二次绘图时减少图表宽度

将django视图python字典转换为highcharts系列数据

在rails中使用jQuery和LazyHighCharts

Symfony3高级图表饼形图空白

Highcharts-legend-item.last()在更改选项卡时消失

如何使用amcharts 4在地图中的多个饼图中创建共享图例？

在Excel中的“饼”中隐藏一系列数据标签

在圆环图上定位标签

如何使用Highcharts获取所选饼图切片的逗号分隔字符串

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐