Question

在显示莫里斯折线图时，我遇到了这个奇怪的问题。仅当我在同一页面上显示收入图表时，它才会显示数据。当我清除收入图表块时，折线图变为空。这些是之前和之后的代码：

功能：

<section class="content">
  <div class="row">
    <div class="col-md-6">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Area Chart</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body chart-responsive">
          <div class="chart" id="revenue-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Line Chart</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body chart-responsive">
          <div class="chart" id="line-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>
</section>

错误：

<section class="content">
  <div class="row">

    <div class="col-md-6">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Line Chart</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body chart-responsive">
          <div class="chart" id="line-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

我发现了问题。但这不合逻辑。

我删除了收入图表的javascript代码块：

// AREA CHART
var area = new Morris.Area({
  element: 'revenue-chart',
  resize: true,
  data: [
    {y: '2011 Q1', item1: 2666, item2: 2666},
    {y: '2011 Q2', item1: 2778, item2: 2294},
    {y: '2011 Q3', item1: 4912, item2: 1969},
    {y: '2011 Q4', item1: 3767, item2: 3597},
    {y: '2012 Q1', item1: 6810, item2: 1914},
    {y: '2012 Q2', item1: 5670, item2: 4293},
    {y: '2012 Q3', item1: 4820, item2: 3795},
    {y: '2012 Q4', item1: 15073, item2: 5967},
    {y: '2013 Q1', item1: 10687, item2: 4460},
    {y: '2013 Q2', item1: 8432, item2: 5713}
  ],
  xkey: 'y',
  ykeys: ['item1', 'item2'],
  labels: ['Item 1', 'Item 2'],
  lineColors: ['#a0d0e0', '#3c8dbc'],
  hideHover: 'auto'
});

在某种程度上，它与折线图冲突。

// LINE CHART
var line = new Morris.Line({
  element: 'line-chart',
  resize: true,
  data: [
    {y: '2011 Q1', item1: 2666},
    {y: '2011 Q2', item1: 2778},
    {y: '2011 Q3', item1: 4912},
    {y: '2011 Q4', item1: 3767},
    {y: '2012 Q1', item1: 6810},
    {y: '2012 Q2', item1: 5670},
    {y: '2012 Q3', item1: 4820},
    {y: '2012 Q4', item1: 15073},
    {y: '2013 Q1', item1: 10687},
    {y: '2013 Q2', item1: 8432}
  ],
  xkey: 'y',
  ykeys: ['item1'],
  labels: ['Item 1'],
  lineColors: ['#3c8dbc'],
  hideHover: 'auto'
});

莫里斯折线图为空

1 个答案: