未显示 Highcharts 仪表

Question

我是 HighCharts 的新手。

我有一个问题，当页面上有多个仪表时，第一个仪表会消失。

这个例子工作正常：

<%@ Page Language="C#" AutoEventWireup="true" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        HighChart test
    </title>  
    <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
    <script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>    
</head>

<body style="background-color: lightgrey">
    <form runat="server">
        <div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
    </form>
    <script>
        $(function () {

            var gaugeOptions = {

                chart: {
                    type: 'solidgauge'
                },

                title: null,

                pane: {
                    center: ['50%', '85%'],
                    size: '140%',
                    startAngle: -90,
                    endAngle: 90,
                    background: {
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                        innerRadius: '60%',
                        outerRadius: '100%',
                        shape: 'arc'
                    }
                },

                tooltip: {
                    enabled: false
                },

                // the value axis
                yAxis: {
                    stops: [
                        [0.3, '#DF5353'], // red
                        [0.5, '#DDDF0D'], // yellow
                        [0.8, '#55BF3B'] // green
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickPixelInterval: 400,
                    tickWidth: 0,
                    title: {
                        y: -70
                    },
                    labels: {
                        y: 16
                    }
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                }
            };

            // The 1 gauge
            $('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: 'Gauge 1'
                    }
                },

                credits: {
                    enabled: false
                },

                series: [{
                    name: 'Gauge 1',
                    data: [0],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}&nbsp;%</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            }));

            // Bring to life 
            setInterval(function () {
                setValue('#gauge1');
            }, 2000);

            function setValue(div) {
                var chart = $(div).highcharts(), point, newVal, inc;

                if (chart) {
                    point = chart.series[0].points[0];
                    inc = Math.round((Math.random() - 0.5) * 100);
                    newVal = point.y + inc;

                    if (newVal < 0 || newVal > 100) {
                        newVal = point.y - inc;
                    }

                    point.update(newVal);
                }
            }
        });
    </script>
</body>
</html>

但是当我添加另一个仪表时，第一个仪表消失了：

<%@ Page Language="C#" AutoEventWireup="true" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        HighChart test
    </title>  
    <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
    <script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
    <script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>    
</head>

<body style="background-color: lightgrey">
    <form runat="server">
        <div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
        <div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
    </form>
    <script>
        $(function () {

            var gaugeOptions = {

                chart: {
                    type: 'solidgauge'
                },

                title: null,

                pane: {
                    center: ['50%', '85%'],
                    size: '140%',
                    startAngle: -90,
                    endAngle: 90,
                    background: {
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                        innerRadius: '60%',
                        outerRadius: '100%',
                        shape: 'arc'
                    }
                },

                tooltip: {
                    enabled: false
                },

                // the value axis
                yAxis: {
                    stops: [
                        [0.3, '#DF5353'], // red
                        [0.5, '#DDDF0D'], // yellow
                        [0.8, '#55BF3B'] // green
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickPixelInterval: 400,
                    tickWidth: 0,
                    title: {
                        y: -70
                    },
                    labels: {
                        y: 16
                    }
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                }
            };

            // The 1 gauge
            $('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: 'Gauge 1'
                    }
                },

                credits: {
                    enabled: false
                },

                series: [{
                    name: 'Gauge 1',
                    data: [0],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}&nbsp;%</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            }));

            // The 2 gauge
            $('#gauge2').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: 'Gauge 2'
                    }
                },

                credits: {
                    enabled: false
                },

                series: [{
                    name: 'Gauge 2',
                    data: [0],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}&nbsp;%</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            }));

            // Bring to life 
            setInterval(function () {
                setValue('#gauge1');
                setValue('#gauge2');
            }, 2000);

            function setValue(div) {
                var chart = $(div).highcharts(), point, newVal, inc;

                if (chart) {
                    point = chart.series[0].points[0];
                    inc = Math.round((Math.random() - 0.5) * 100);
                    newVal = point.y + inc;

                    if (newVal < 0 || newVal > 100) {
                        newVal = point.y - inc;
                    }

                    point.update(newVal);
                }
            }
        });
    </script>
</body>
</html>

任何人都知道我做错了什么。

这里是 JSFiddle 的链接

示例 1 - https://jsfiddle.net/eszygfjb/1/

示例 2 - https://jsfiddle.net/2cfpL019/

Answer 1

这是因为您将两个 div 元素上的 data-highcharts-chart 属性设置为相同的值。据我所知，Highcharts 在内部使用它来确定您可以访问 Highcharts.charts-Array.

中的 individual 图表的顺序

通过将它们都设置为索引零，您基本上是在创建第二个图表时覆盖第一个图表的对象实例。只需删除这些属性，两个仪表都可以正常显示。

<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>
<div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>

未显示 Highcharts 仪表

Highcharts gauge not shown

javascript

asp.net

highcharts

gauge

这个例子工作正常：

但是当我添加另一个仪表时，第一个仪表消失了：