jsfiddle here!

Question

正如您所看到的，滚动已启用，但是当我运行下面的代码时，它会显示滚动条，但它会被禁用（褪色）。图表在屏幕上几乎是边缘到边缘显示的，它是如果我只代表几个日期间隔，那么它是可读的，但是当我放置...例如15个日期间隔时，它变得非常狭窄和不可读，并且你几乎看不到一些较小的绘图间隔，只有你缩放。我希望默认情况下图表更宽，所以我可以清楚地看到所有间隔并可以滚动它。即使我缩放图表，滚动条也会淡出。我在highcharts网站上的所有滚动条示例中看到，图表滚动条工作并且数据在宽阔的空间上绘制，但在我的网站上它会自动进行自动调整并且我没有滚动条，请帮忙！

//编辑：也许与min，max有关？但是当我尝试设置任何最小值时，它给出了1970年到2020年的时间表：/

jsfiddle here!

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <!-- <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> -->
    <script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            var options = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'columnrange',
                    inverted: true,
                    zoomType: 'xy'
                },
                title: {
                    text: 'Production status'
                },
                xAxis: {
                    categories: ["Status"]
                },
                yAxis: {
                    type: 'datetime',
                    title: {
                        text: 'Interval'
                    }
                   // tickPixelInterval: 3600*1000
                },
                scrollbar: {
                    enabled: true
                },
                plotOptions: {
                    columnrange: {
                        grouping: false
                    }
                },
                legend: {
                    enabled: true
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
                        ' - ' + Highcharts.dateFormat('%e %B %H:%M', this.point.high) + '<br/>' + Highcharts.dateFormat('%M minutes',this.point.high-this.point.low) + '<br/';
                    }
                },
                series: []
            };

            // Load the data from the XML file 
            $.get('Chart_data.xml', function (xml) {

                // Split the lines
                var $xml = $(xml);

                // push series
                $xml.find('series').each(function (i, series) {

                    var seriesOptions = {
                        name: $(series).find('name').text(),
                        data: []
                    };

                    // push data points
                    $(series).find('date').each(function (i, value) {
                        var seriesData = {
                            x: 0,
                            low: Date.parse($(value).find('low').text()+" UTC"),
                            high: Date.parse($(value).find('high').text()+" UTC")
                        };
                        seriesOptions.data.push(seriesData);
                    });

                    // add it to the options
                    options.series.push(seriesOptions);
                });

                var chart = new Highcharts.Chart(options);
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="container" style="">
    </div>
</asp:Content>

XML数据示例：

<?xml version="1.0" encoding="utf-8"?>
<chart>
  <series>
    <name>ChangeOver</name>
    <date>
      <low>7/30/2014 5:25:06 PM</low>
      <high>7/30/2014 5:33:41 PM</high>
    </date>
    <date>
      <low>7/31/2014 10:30:02 AM</low>
      <high>7/31/2014 11:26:01 AM</high>
    </date>
  </series>
  <series>
    <name>BreakDown</name>
    <date>
      <low>7/30/2014 3:00:23 PM</low>
      <high>7/30/2014 3:02:22 PM</high>
    </date>
    <date>
      <low>7/30/2014 5:11:39 PM</low>
      <high>7/30/2014 5:17:51 PM</high>
    </date>
    <date>
      <low>7/30/2014 10:23:16 PM</low>
      <high>7/30/2014 10:33:13 PM</high>
    </date>
    <date>
      <low>7/31/2014 10:21:18 AM</low>
      <high>7/31/2014 10:30:02 AM</high>
    </date>
    <date>
      <low>7/31/2014 11:54:58 AM</low>
      <high>7/31/2014 1:46:06 PM</high>
    </date>
    <date>
      <low>7/31/2014 2:33:30 PM</low>
      <high>7/31/2014 2:33:45 PM</high>
    </date>
    <date>
      <low>7/31/2014 2:33:45 PM</low>
      <high>7/31/2014 2:33:52 PM</high>
    </date>
    <date>
      <low>7/31/2014 2:33:52 PM</low>
      <high>7/31/2014 2:48:39 PM</high>
    </date>
  </series>
  <series>
    <name>Production</name>
    <date>
      <low>7/30/2014 3:02:22 PM</low>
      <high>7/30/2014 5:11:39 PM</high>
    </date>
    <date>
      <low>7/30/2014 5:17:51 PM</low>
      <high>7/30/2014 5:25:06 PM</high>
    </date>
    <date>
      <low>7/30/2014 5:33:41 PM</low>
      <high>7/30/2014 10:23:16 PM</high>
    </date>
    <date>
      <low>7/30/2014 10:33:13 PM</low>
      <high>7/31/2014 10:21:18 AM</high>
    </date>
    <date>
      <low>7/31/2014 11:26:01 AM</low>
      <high>7/31/2014 11:54:58 AM</high>
    </date>
    <date>
      <low>7/31/2014 1:46:06 PM</low>
      <high>7/31/2014 2:33:30 PM</high>
    </date>
  </series>
  <series>
    <name>TrialRun</name>
  </series>
</chart>

输出：

chart

实际上有比你看到的更多的线条，但它们是如此狭窄，以至于它们不能像这样被注意到。滚动条消失了！

Answer 1

您需要在y轴上设置最小/最大值（在倒置图表中，轴被翻转）。

如何使这个图表更宽/启用滚动？

jsfiddle here!

1 个答案: