html按钮未触发事件到所需图形容器触发到Highchart JS中的不同图形

维尼拉·普里亚

我在2个不同的div(container1,container2)中有2个图,并且有两组按钮。两组按钮都仅触发图2。当单击图1的按钮时,它应该更改图1;当我单击图2的按钮时,它应该更改图2。但是图1和图2的按钮都触发到图2。仅图2。

JS小提琴代码http://jsfiddle.net/h5t4c8hj/7/

 var chart = Highcharts.chart('container', {
    title: {
        text: 'Graph 1'
    },
    subtitle: {
        text: 'plain'
    },
    xAxis: {
        categories: ['Bin1s', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
    },
    series: [{
        type: 'column',
        colorByPoint: false,
        data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
        showInLegend: false
    }],
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },
}, function(chart) {
    $.each(chart.series[0].data, function (i, data) {
        if (data.y >= 70)
            data.update({
                color: 'yellow'
            });
        if (data.y >= 90)
            data.update({
                color: 'red'
            });
    })
});

$('#plain').click(function() {
    chart.update({
        chart: {
            inverted: false,
            polar: false
        },
        subtitle: {
            text: 'Plain'
        }
    });
});

$('#inverted').click(function() {
    chart.update({
        chart: {
            inverted: true,
            polar: false
        },
        subtitle: {
            text: 'inverted'
        }
    });
});

$('#polar').click(function() {
    chart.update({
        chart: {
            inverted: false,
            polar: true
        },
        subtitle: {
            text: 'Polar'
        }
    });
});

 var chart = Highcharts.chart('container1', {
                title: {
                    text: 'Graph 2'
                },
                subtitle: {
                    text: 'Filled %'
                },
                xAxis: {
                    categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
                },

                series: [{
                    type: 'column',
                    colorByPoint: false,
                    data: [42.4, 71.5, 19.4, 29.2, 44.0],
                    showInLegend: false
                }],
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%'
                        }
                    }
                },

            },
                 function (chart) {
                    $.each(chart.series[0].data, function (i, data) {
                        if (data.y >= 70)
                            data.update({
                                color: 'yellow'
                            });
                        if (data.y >= 90)
                            data.update({
                                color: 'red'
                            });
                    })
                });

            //code for color change


            $('#plain1').click(function () {
                chart.update({
                    chart: {
                        inverted: false,
                        polar: false
                    },
                    subtitle: {
                        text: 'Sewage'
                    }
                });
            });

            $('#inverted1').click(function () {
                chart.update({
                    chart: {
                        inverted: true,
                        polar: false
                    },
                    subtitle: {
                        text: 'Inverted'
                    }
                });
            });

            $('#polar1').click(function () {
                chart.update({
                    chart: {
                        inverted: false,
                        polar: true
                    },
                    subtitle: {
                        text: 'Polar'
                    }
                });
            });
scaisEdge

Yuu用相同的名称命名了两个字符。
您必须使用chart1作为第二个字符,并在更新中引用此字符

 var chart1 = Highcharts.chart('container1', {
            title: {
                text: 'Graph 2'
            },
            subtitle: {
                text: 'Filled %'
            },
            xAxis: {
                categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
            },

            series: [{
                type: 'column',
                colorByPoint: false,
                data: [42.4, 71.5, 19.4, 29.2, 44.0],
                showInLegend: false
            }],
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}%'
                    }
                }
            },

        },
             function (chart) {
                $.each(chart.series[0].data, function (i, data) {
                    if (data.y >= 70)
                        data.update({
                            color: 'yellow'
                        });
                    if (data.y >= 90)
                        data.update({
                            color: 'red'
                        });
                })
            });

        //code for color change


        $('#plain1').click(function () {
            chart1.update({
                chart: {
                    inverted: false,
                    polar: false
                },
                subtitle: {
                    text: 'Sewage'
                }
            });
        });

        $('#inverted1').click(function () {
            chart1.update({
                chart: {
                    inverted: true,
                    polar: false
                },
                subtitle: {
                    text: 'Inverted'
                }
            });
        });

        $('#polar1').click(function () {
            chart1.update({
                chart: {
                    inverted: false,
                    polar: true
                },
                subtitle: {
                    text: 'Polar'
                }
            });
        });

http://jsfiddle.net/6h9o5m2w/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何触发图形的点击事件?

在 matplotlib 中绘制不同颜色的图形

在 R 中自动绘制不同的图形

R中的for循环-生成不同的图形

Fragment 中未触发按钮单击事件

图形容器如何工作?

在DisplayObjectContainer中组合图形和Sprite时容器的大小不同

在 WPF 中通过触发器在不同控件上使用相同的 SVG 几何图形

Kinetic JS-toDataURL-阶段与捕获的图形大小不同

Chart.js 使用选择显示不同的图形

如何组合不同行的图形(数据框)并在R中的同一图形中绘图?

动画制作在Cytoscape.js中的图形

错误:找不到图形容器元素

Backbone.js / Handlebars按钮单击事件未触发

如何在MATLAB中绘制不同角度的图形

使用ODE中的循环以图形方式比较不同的参数R

如何在不同图形中绘制一列?

如何在Matplotlib图形的单行中获得不同的颜色?

在图形或文本输出中显示combn()的不同排列

在同一图形中叠加不同的绘图类型

为不同图形中的节点分配相同的颜色

在 R 中为不同类别生成图形

在“ for”循环MATLAB中在同一图形上绘制不同数据集的图形

如何在另一个python图形中添加不同的图形(作为插图)

在模板中显示具有不同参数的图形 - 所有图形都是混合的

jQuery事件未触发使用innerHTML在javascript中创建的按钮

图形未显示在打印Flot.js中

制作不同颜色的图形

在 dropzone js 中未触发 maxfilesexceeded 事件