Question

如果不修改数据，我将无法设置xAxis的最小值和最大值。我尝试使用plotOptions并设置pointStart: Date.UTC(2016, 3, 1)，但这样做会破坏数据。该系列的结尾位置最右边，并且无法正确加载。

是否可以设置最小值和最大值并使数据服从所设置的内容？当我未设置min和max时，它将正确加载。我需要它从2016年4月开始，到2018年4月结束，每个月都有一个勾号。

提琴：https://jsfiddle.net/omaraziz/h5jsk7a3/5/

这是一个几乎可以使用的版本，只需要xAxis日期和刻度（数据并不完全相同，但是json的设置完全相同：

数据来自JSON文件（data.json）：

{
   "(1)": [1,2,3,4,5],
   "(2)": [6,7,8,9,0]
   "(3)": [1,4,7,2,0]
}

设置选项：

var myChart = function() drawChart() {
     $("#container").highcharts("StockChart", {

            rangeSelector: {
                 enabled: false
            },

            xAxis: {
                 type: 'datetime',
                 tickInterval: (24 * 3600 * 1000) * 30, // every month
                 min: Date.UTC(2016, 3, 1),
                 max: Date.UTC(2018, 3, 4)
            },

           series: processedData, // from the data loaded below

    });

};

加载JSON：

processedData = [];

$(function () {
    $getJSON("data.json", function(data) {

        for(let value in data) {

            if(data.hasOwnProperty(value)) {
                processedData.push({
                   name: value,
                   data: data[value],
                })

        }
        myChart(); // after the data has loaded
   });
});

Answer 1

如果您每小时都在记录数据，希望使用以下两行代码可以解决您的问题：

var myChart = function drawChart() {

    $("#container").highcharts("StockChart", {

        rangeSelector: {
            enabled: false,
        },

        xAxis: {
            type: 'datetime',
            ordinal: false,
            min:   Date.UTC(2016, 3, 1),
            max:  Date.UTC(2018, 3, 4)

        },
        plotOptions:{
            series:{
                pointStart:Date.UTC(2016, 3, 1),
                pointInterval: 3600 * 1000
            }
        },

        series: processedData,

    });

};

const processedData = [];

$(function () {
    $.getJSON("https://omaraziz.me/CC-chart/new-activity.json", function (data) {

        for(let value in data) {
            if(data.hasOwnProperty(value)) {
                processedData.push({
                    //pointStart: Date.UTC(2016, 3, 1),
                    name: value,
                    data: data[value],
                })
            }
        }
        myChart();
    });
});

以下是示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<div id="container"></div>

{
    foreach($_SESSION["shopping_cart"] as $keys => $values)
    {
        $output .= '

            <div class="customer_2_item_line">

                <div class="customer_2_item_line_cell"><img src="image/'.$values['product_code'].'.jpg"><span class="customer_2_line_cell_amt">'.$values['product_quantity'].'</span></div>

                <div class="customer_2_item_line_cell"><p>ET Spork</p><p><span></span><span class="customer_2_line_cell_name">'.$values['product_name'].'</span<</p></div>

                <div class="customer_2_item_line_cell"><p><span>$</span><span class="customer_2_line_cell_total">'.$values['product_total'].'</span></p></div>

            </div>

            <hr>

        ';
        $total_price = number_format($total_price + ($values['product_quantity'] * $values['product_price']), 2);
        $total_item = $total_item + $values['product_quantity'];
        $total_price_shipping = number_format($total_price + $shipping_price, 2);
        $qty[] = $values['product_quantity'];
    }

    $output .= '

            <input type="text" id="subtotal_cost" name="subtotal_cost" value='.$total_price.'>
            <input type="text" id="shipping_total_cost" name="shipping_total_cost" value='.$shipping_price.'>
            <input type="text" id="total_cost" name="total_cost" value='.$total_price_shipping.'>
            <input type="hidden" id="item_qty1" name="item_qty1" value='.$qty[0].'>
            <input type="hidden" id="item_qty2" name="item_qty2" value='.$qty[1].'>
            <div id="customer_2_subtotal_shipping">

            <div class="customer_2_ss_line"><p>Subtotal</p><p><span>$</span><span></span></p></div>
            <div class="customer_2_ss_line"><p>Shipping</p><p><span>$</span><span></span></p></div>
            </div>
            <hr>

            <div id="customer_2_total">
            <p>Total</p>
                <p><span>USD</span><span><span>$</span><span></span></span></p>
            </div>
    ';
}

设置xAxis的最小值和最大值时，高库存数据未显示

1 个答案: