Не отображается диаграмма VU-meter Gauge с использованием HighCharts в Durandal

Я пытаюсь добавить диаграмму Vu-Meter Gauge в приложение Durandal. Я сохранил Js-код с высоким уровнем диаграммы в "viewAttacthed". Мой код Js выглядит следующим образом:

define(['services/logger'], function (logger, highcharts) {

    //#region Internal Methods
    function activate() {
        logger.log('Reports View Activated', null, 'Resources', true);
        return true;
    }

    //#endregion

    function viewAttached(view) {

        $('#ufcGaugeChart', view).highcharts({

            chart: { type: 'gauge' },
            title: null,

            pane: [{
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '67%'],
                size: 175
            }],

            yAxis: [{
                min: 0,
                max: 100000,
                minorTickPosition: 'inside',
                tickPosition: 'inside',
                labels: {
                    rotation: 'auto',
                    distance: 20
                },
                plotBands: [{
                    from: 0,
                    to: 40000,
                    color: '#679b4f',
                    innerRadius: '100%',
                    outerRadius: '105%'
                }, {
                    from: 40000,
                    to: 70000,
                    color: '#d5995c',
                    innerRadius: '100%',
                    outerRadius: '105%'
                }, {
                    from: 70000,
                    to: 100000,
                    color: '#ab4641',
                    innerRadius: '100%',
                    outerRadius: '105%'
                }],
                pane: 0,
                title: {
                    // need to change the style.
                    text: 'Gauge',
                    y: 0
                }
            }],

            plotOptions: {
                gauge: {
                    dataLabels: { enabled: true },
                    dial: { radius: '100%' }
                }
            },
            series: [{
                data: [54036],
                yAxis: 0
            }]

        },

         // Let the music play
         function (chart) {
             setInterval(function () {
                 alert("hi");
                 var left = chart.series[0].points[0],
                     right = chart.series[1].points[0],
                     leftVal,
                     inc = (Math.random() - 0.5) * 3;

                 leftVal = left.y + inc;
                 rightVal = leftVal + inc / 3;
                 if (leftVal < -20 || leftVal > 6) {
                     leftVal = left.y - inc;
                 }
                 if (rightVal < -20 || rightVal > 6) {
                     rightVal = leftVal;
                 }

                 left.update(leftVal, false);
                 right.update(rightVal, false);
                 chart.redraw();

             }, 500);

         });
    };


    var vm = {
        activate: activate,
        title: 'Reports View',
        paymentDate: '06/09/2013',
        paymentAmount: '$120,098.66',
        paymentCheck: '235',
        viewAttached: viewAttached
    };

    return vm;
});

но я не могу видеть диаграмму датчика. Пожалуйста, дайте мне знать, где именно я что-то упускаю или делаю не так.

Скрипт выкидывает:

Ошибка Uncaught Highcharts # 17


person Animesh    schedule 22.07.2013    source источник


Ответы (2)


В исходном коде для демонстрации твердого датчика есть следующие файлы js:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>

Объединение и минимизация этих ошибок устранили ошибку 17 для меня.

person Gaff    schedule 30.05.2014

Ошибка 17 означает, что «Запрошенный тип серии не существует», возможно, у вас нет прикрепленного файла highcharts-more.js.

http://www.highcharts.com/errors/17

person Sebastian Bochan    schedule 22.07.2013
comment
Нет, я тоже добавил это в свой BundleConfig.cs файл. Но все равно это не работает. помимо этого у меня есть некоторые другие диаграммы на этой странице, такие как столбец, круговая диаграмма и т. д., которые работают нормально. но эта диаграмма не отображается .. я не могу понять почему ... - person Animesh; 22.07.2013