Датчик Highcharts не показан

Я новичок в использовании 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/


javascript asp.net highcharts gauge
person Lars    schedule 18.05.2016    source источник
comment
привет, не могли бы вы предоставить свой код в jsfiddle?   -  person Sagar R    schedule 18.05.2016
comment
прежде всего удалите ‹!DOCTYPE html› из вашего кода.   -  person Sagar R    schedule 18.05.2016
comment
Удаление ‹!DOCTYPE html› ничего не изменило.   -  person Lars    schedule 18.05.2016

Ответы (1)


arrow_upward
4
arrow_downward

Это потому, что вы устанавливаете data-highcharts-chart-Attribute для обоих элементов div на одно и то же значение. Насколько я знаю, это используется внутри Highcharts для определения порядка, в котором вы можете получить доступ к отдельным диаграммам в массиве Highcharts.charts-Array.

Установив для них обоих нулевой индекс, вы в основном перезаписываете экземпляр объекта первой диаграммы при создании второй. Просто удалите эти атрибуты, и оба датчика будут отображаться нормально.

<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>
person Martin Schneider    schedule 18.05.2016
comment
Работает отлично. Спасибо за помощь. - person Lars; 18.05.2016