猿问

如何使用来自 CSV 的数据在 Highstock 图表中将分钟设置为单位

我正在尝试获取一张高价图表以在 x 轴上显示分钟数。我在 csv 数据中的第一列是分钟。我想我的 rangeSelector 选项是正确的，但我不知道如何使 x 轴成为我的 csv 的分钟数。


我看到的大多数解决方案都用 Date.UTC(xx, xx, xx, xx) 或类似的东西填充 x 轴。但我需要用分钟来填满它。


这是我到目前为止所拥有的：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>


<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Highcharts Data from innerHTML of hidden div</title>

    <style>

        body {

            margin-top: 30px;

            margin-left: 40px;

        }


        pre {

            border: 1px solid red;

        }

    </style>


    <!-- Highcharts related imports -->

    <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>

    <script src="http://code.highcharts.com/modules/data.js"></script>

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


    <!-- Highstock related imports  -->

    <script src="https://code.highcharts.com/stock/highstock.js"></script>

    <script src="https://code.highcharts.com/stock/modules/data.js"></script>

    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

    <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


</head>


<body>

    <div style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em">

        Highcharts data load from a csv stored inline in a hidden div


UYOU
浏览 122回答 1
1回答

翻过高山走不出你

请注意，在日期时间轴的 Highharts 中，X 值是自 1970 年以来以毫秒为单位的时间戳。因此您的值不是分钟而是毫秒。要实现您想要的目标，您必须映射 CSV 数据以制作分钟时间戳并更改 xAxis 标签和工具提示内容呈现点日期的方式。检查下面发布的演示和代码。代码：&nbsp; xAxis: {&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; enabled: true,&nbsp; &nbsp; &nbsp; text: 'Minutes'&nbsp; &nbsp; },&nbsp; &nbsp; type: 'datetime',&nbsp; &nbsp; dateTimeLabelFormats: {&nbsp; &nbsp; &nbsp; minute: '%M',&nbsp; &nbsp; &nbsp; hour: '%H:%M',&nbsp; &nbsp; &nbsp; day: '%H:%M',&nbsp; &nbsp; &nbsp; week: '%e. %b',&nbsp; &nbsp; &nbsp; month: '%b \'%y',&nbsp; &nbsp; &nbsp; year: '%Y'&nbsp; &nbsp; }&nbsp; },&nbsp; tooltip: {&nbsp; &nbsp; formatter: function () {&nbsp; &nbsp; &nbsp; &nbsp; const points = this.points;&nbsp; &nbsp; &nbsp; &nbsp; return [&nbsp; &nbsp; &nbsp; &nbsp; Highcharts.dateFormat('%H:%M', this.x),&nbsp; &nbsp; &nbsp; &nbsp; 'Series1: ' + points[0].y,&nbsp; &nbsp; &nbsp; &nbsp; 'Series2: ' + points[1].y&nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; },&nbsp; &nbsp; split: true&nbsp; }
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答