高图表从每个点开始换行

Posted 2021-04-06

我正在使用高位图表显示能源数据，但我认为由于某些负值，导致从每个新点开始一条新线且线之间没有任何联系的高波动率。这是我的结果。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
        }
}
)

答案

您需要为z-index提供外部图形值，以识别其位置请使用您的数据集通过该小提琴链接。我已经改善了您的代码。因此您可以对其进行审查。

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

另一答案

您有未排序的数据-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/