Morris.js圖表不適用於我

任何幫助使用morris.js圖表。從這裏Morris.js圖表不適用於我

下載的所有工作得很好，但是當我要添加不同類型的圖表，圖表將顯示不出來，他甜甜圈見下表停止工作。

我想改變圖表的類型頁面上，所以我添加的代碼，然後在HTML我改變DIV ID

這裏是.js文件

// First Chart Example - Area Line Chart 
Morris.Area({ 
// ID of the element in which to draw the chart. 
element: 'morris-chart-area', 
// Chart data records -- each entry in this array corresponds to a point on 
// the chart. 
data: [ 
{ d: '2012-10-01', visits: 802 }, 
{ d: '2012-10-02', visits: 783 }, 
{ d: '2012-10-03', visits: 820 }, 
{ d: '2012-10-04', visits: 839 }, 
{ d: '2012-10-05', visits: 792 }, 
{ d: '2012-10-06', visits: 859 }, 
{ d: '2012-10-07', visits: 790 }, 
{ d: '2012-10-08', visits: 1680 }, 
{ d: '2012-10-09', visits: 1592 }, 
{ d: '2012-10-10', visits: 1420 }, 
{ d: '2012-10-11', visits: 882 }, 
{ d: '2012-10-12', visits: 889 }, 
{ d: '2012-10-13', visits: 819 }, 
{ d: '2012-10-14', visits: 849 }, 
{ d: '2012-10-15', visits: 870 }, 
{ d: '2012-10-16', visits: 1063 }, 
{ d: '2012-10-17', visits: 1192 }, 
{ d: '2012-10-18', visits: 1224 }, 
{ d: '2012-10-19', visits: 1329 }, 
{ d: '2012-10-20', visits: 1329 }, 
{ d: '2012-10-21', visits: 1239 }, 
{ d: '2012-10-22', visits: 1190 }, 
{ d: '2012-10-23', visits: 1312 }, 
{ d: '2012-10-24', visits: 1293 }, 
{ d: '2012-10-25', visits: 1283 }, 
{ d: '2012-10-26', visits: 1248 }, 
{ d: '2012-10-27', visits: 1323 }, 
{ d: '2012-10-28', visits: 1390 }, 
{ d: '2012-10-29', visits: 1420 }, 
{ d: '2012-10-30', visits: 1529 }, 
{ d: '2012-10-31', visits: 1892 }, 
], 
// The name of the data record attribute that contains x-visitss. 
xkey: 'd', 
// A list of names of data record attributes that contain y-visitss. 
ykeys: ['visits'], 
// Labels for the ykeys -- will be displayed when you hover over the 
// chart. 
labels: ['Visits'], 
// Disables line smoothing 
smooth: false, 
}); 

Morris.Donut({ 
element: 'morris-chart-donut', 
data: [ 
{label: "Bounce", value: 42.7}, 
{label: "Engagment", value: 57.3}, 

], 
formatter: function (y) { return y + "%" ;} 
}); 

Morris.Line({ 
// ID of the element in which to draw the chart. 
element: 'morris-chart-line', 
// Chart data records -- each entry in this array corresponds to a point on 
// the chart. 
data: [ 
{ d: '2012-10-01', visits: 802 }, 
{ d: '2012-10-02', visits: 783 }, 
{ d: '2012-10-03', visits: 820 }, 
{ d: '2012-10-04', visits: 839 }, 
{ d: '2012-10-05', visits: 792 }, 
{ d: '2012-10-06', visits: 859 }, 
{ d: '2012-10-07', visits: 790 }, 
{ d: '2012-10-08', visits: 1680 }, 
{ d: '2012-10-09', visits: 1592 }, 
{ d: '2012-10-10', visits: 1420 }, 
{ d: '2012-10-11', visits: 882 }, 
{ d: '2012-10-12', visits: 889 }, 
{ d: '2012-10-13', visits: 819 }, 
{ d: '2012-10-14', visits: 849 }, 
{ d: '2012-10-15', visits: 870 }, 
{ d: '2012-10-16', visits: 1063 }, 
{ d: '2012-10-17', visits: 1192 }, 
{ d: '2012-10-18', visits: 1224 }, 
{ d: '2012-10-19', visits: 1329 }, 
{ d: '2012-10-20', visits: 1329 }, 
{ d: '2012-10-21', visits: 1239 }, 
{ d: '2012-10-22', visits: 1190 }, 
{ d: '2012-10-23', visits: 1312 }, 
{ d: '2012-10-24', visits: 1293 }, 
{ d: '2012-10-25', visits: 1283 }, 
{ d: '2012-10-26', visits: 1248 }, 
{ d: '2012-10-27', visits: 1323 }, 
{ d: '2012-10-28', visits: 1390 }, 
{ d: '2012-10-29', visits: 1420 }, 
{ d: '2012-10-30', visits: 1529 }, 
{ d: '2012-10-31', visits: 1892 }, 
], 
// The name of the data record attribute that contains x-visitss. 
xkey: 'd', 
// A list of names of data record attributes that contain y-visitss. 
ykeys: ['visits'], 
// Labels for the ykeys -- will be displayed when you hover over the 
// chart. 
labels: ['Visits'], 
// Disables line smoothing 
smooth: false, 
}); 

Morris.Bar ({ 
element: 'morris-chart-bar', 
data: [ 
{device: 'iPhone', geekbench: 136}, 
{device: 'iPhone 3G', geekbench: 137}, 
{device: 'iPhone 3GS', geekbench: 275}, 
{device: 'iPhone 4', geekbench: 380}, 
{device: 'iPhone 4S', geekbench: 655}, 
{device: 'iPhone 5', geekbench: 1571} 
], 
xkey: 'device', 
ykeys: ['geekbench'], 
labels: ['Geekbench'], 
barRatio: 0.4, 
xLabelAngle: 35, 
hideHover: 'auto' 
}); 

// Use Morris.Area instead of Morris.Line 
Morris.Area({ 
element: 'graph', 
data: [ 
{x: '2010 Q4', y: 3, z: 7}, 
{x: '2011 Q1', y: 3, z: 4}, 
{x: '2011 Q2', y: null, z: 1}, 
{x: '2011 Q3', y: 2, z: 5}, 
{x: '2011 Q4', y: 8, z: 2}, 
{x: '2012 Q1', y: 4, z: 4} 
], 
xkey: 'x', 
ykeys: ['y', 'z'], 
labels: ['Y', 'Z'] 
}).on('click', function(i, row){ 
console.log(i, row); 
}); 

    // Use Morris.Bar 
Morris.Bar({ 
element: 'graph', 
data: [ 
{x: '2011 Q1', y: 3, z: 2, a: 3}, 
{x: '2011 Q2', y: 2, z: null, a: 1}, 
{x: '2011 Q3', y: 0, z: 2, a: 4}, 
{x: '2011 Q4', y: 2, z: 4, a: 3} 
], 
xkey: 'x', 
ykeys: ['y', 'z', 'a'], 
labels: ['Y', 'Z', 'A'], 
stacked: true 
});

，這裏是我的HTML部分

<!-- start of bars chart--> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
      <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Store  Optiisation: October 1, 2013 - October 31, 2013</h3> 
      </div> 
      <div class="panel-body"> 
      <div id="morris-chart-graph"></div> 
      </div> 
     </div> 
     </div> 
    </div>

這是甜甜圈部分

<div class="row"> 
     <div class="col-lg-4"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
      <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Traffic Sources: October 1, 2013 - October 31, 2013</h3> 
      </div> 
      <div class="panel-body"> 
      <div id="morris-chart-donut"></div> 
      <div class="text-right"> 
       <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a> 
      </div> 
      </div> 
     </div> 
     </div>

任何幫助表示讚賞。

來源

2014-07-04 Ronan2505

js文件中的函數按順序工作，你應該做幾件事情，相同的代碼將開始爲你工作。 1.你應該下載一個腳本和當前工作文件的副本 2.然後你需要按照你的頁面編輯js文件，這意味着如果你正在使用那個JavaScript文件和你的索引頁來顯示圖表/圖表，那麼你需要僅爲索引製作副本，並且只有您在索引上使用的頁面上纔會顯示這些圖表。

例如，如果您僅使用甜甜圈和條形圖，則只能在文件中使用這些圖表並按順序特別使用它們。如果你想在你的html中首先放置條形圖，那麼第一個代碼將是js文件中的條形圖，然後是甜甜圈.....你可以在其後有其他圖表javascript代碼，但是如果你之前有任何其他圖表你沒有使用這將創建問題，你將無法看到HTML。

我希望你能看到你的圖表。

來源

2014-11-05 10:51:34

非常好的解決方案，它爲我工作。 –

Morris.js圖表​​不適用於我

回答

相關問題

Morris.js圖表不適用於我