высокие графики, начинающие новую линию с каждой точки - PullRequest
0 голосов
/ 03 мая 2020

Я использую высокие графики для отображения энергетических данных, но я думаю, что из-за некоторого отрицательного значения старшие кадры начинают новую линию с каждой новой точки и линии не имеют никакой связи между ними. вот картина моих результатов. problem Image

Вы можете видеть на изображении только одну строку. вот мои данные для этого. У меня есть 4 серии, чтобы показать на графике, но здесь я предоставляю только одну, потому что каждая строка имеет одну и ту же проблему

var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};

и вот как я инициализирую объект highcharts.

$('#'+id).highcharts({
    title: {
      text: titletext
    },
    time: {
    timezone: 'Asia/Karachi'
},
    chart: {
        zoomType: 'x',
        title: 'Meter 1'
    },
    xAxis: {
             labels: {

                formatter:function(){
                return Highcharts.dateFormat("%b %e", this.value);
            }
            }, 
            title: {
              text: 'Date'
            },
            showLastLabel: true,
            tickmarkPlacement: 'on',
            tickPosition: 'inside',
            tickWidth: 0,
            tickPixelInterval: 60,
            lineWidth: 2,
            lineColor: 'rgba(255,205,255,0.6)',
            minPadding: 0,
            gridLineWidth: 0,
            offset: 20,
            type: 'datetime',
            tickInterval: 24 * 3600 * 1000,
            endOnTick: true,

        },
        yAxis: {
            gridLineColor: 'black',
            gridLineWidth: 0,
            title: {
                enabled: true,
                text: cap
            },
            labels: {
                enabled: true
            }
        },
        tooltip: {
            backgroundColor: 'white',
            borderColor: 'black',
            shadow: true,
            style: {
                color: 'black',
                fontSize: '12px',
                padding: '8px'
            },
            enabled: true,
            crosshairs: false,
            shared: false,
            snap: 30,
        },
        plotOptions: {
            flags: {
                shape: 'squarepin'
            }
        },
        series: [
            {
                name: 'Total kwh',
                data: data.vt
            },
            {
                name: 'Day kwh',
                data: data.dt
            },
            {
                name: 'Peak kwh',
                data: data.pt
            },
            {
                name: 'Off Peak kwh',
                data: data.opt
            }
            ],
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30,
            navigation: {
              enabled: true
            },
            adjustChartSize: true,
        },
        exporting: {
          filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
          buttons: {
            contextButton: {
              menuItems: ["viewFullscreen",
                          "separator",
                          "downloadJPEG",
                          "separator",
                          "downloadXLS",
                        ]
            }
          }
        },
        credits: {
            enabled: false
        }
}
)

Ответы [ 2 ]

0 голосов
/ 04 мая 2020

У вас есть несортированные данные - ошибка Highcharts # 15: https://www.highcharts.com/errors/15/

Вы можете отсортировать их следующим образом:

data.vt.sort(function(a, b) {
  return a[0] - b[0];
});

Живая демоверсия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/

0 голосов
/ 03 мая 2020

Вам необходимо предоставить внешнее графическое значение для z-index, которое будет идентифицировать его положение. Пожалуйста, go через эту ссылку скрипта с набором данных ur. Я улучшил ваш код. Таким образом, вы можете просмотреть его.

https://jsfiddle.net/vishalanand77/f6dnua28/32

...