使用D3.js圖表創建儀表板時的疑問

我想要創建一個儀表板，將四個不同的基於D3.js的圖表整合到一個佈局中。我發現這個解決方案：https://github.com/keen/dashboards/blob/gh-pages/README.md 然而，在自述我發現這一點：使用D3.js圖表創建儀表板時的疑問

設置：如果你是一個註冊的敏銳IO用戶，瀏覽到您的敏銳的項目，或者如果你沒有在用戶首先，您可以簡單地使用我們爲您準備的一些演示數據。您可以通過訪問存儲庫並導航到演示數據。在那裏，你會看到一些JavaScript文件，其中包含一些代碼。我們將簡單地將粘貼到.html文件中。

我不清楚這個工具是否可以作爲開源使用，還是實際上依賴於Keen IO中的帳戶？

事實上，我需要的只是帶有不同div容器和一些基於CSS的樣式的佈局模板，以便我可以將我的D3.js圖表放入每個div容器中。

來源

2017-02-02 Dinosaurius

您是否使用[keen.io]（https://keen.io/）的數據創建儀表板？這個github項目主要看起來像是如何從API中消費和可視化數據的演示。如果你只是試圖用多個'd3'圖表（你自己製作的）創建一個頁面，那麼這個問題就沒有意義了。 – Mark

你的問題更是值得懷疑的，但是這可能是以下問題的重複

how to show two d3.js diagrams on the same page

另一種選擇是使用CanvasJS

HTML：

<div id="chartContainer1" style="height: 260px; width: 100%;"></div> 
<div id="chartContainer2" style="height: 260px; width: 100%;"></div>

JavaScript的：

var chart1 = new CanvasJS.Chart("chartContainer1", 
    { 

     data: [ 
     { 
     type: "column", 
     dataPoints: [ 
     { x: 10, y: 71 }, 
     { x: 20, y: 55}, 
     { x: 30, y: 50 }, 
     { x: 40, y: 65 }, 
     { x: 50, y: 95 }, 
     { x: 60, y: 68 }, 
     { x: 70, y: 28 }, 
     { x: 80, y: 34 }, 
     { x: 90, y: 14} 
     ] 
     } 
     ] 
    }); 

var chart2 = new CanvasJS.Chart("chartContainer2", 
    { 

     data: [ 
     { 
     type: "column", 
     dataPoints: [ 
     { x: 10, y: 21 }, 
     { x: 20, y: 45}, 
     { x: 30, y: 30 }, 
     { x: 40, y: 65 }, 
     { x: 50, y: 55 }, 
     { x: 60, y: 88 }, 
     { x: 70, y: 38 }, 
     { x: 80, y: 54 }, 
     { x: 90, y: 13} 
     ] 
     } 
     ] 
    }); 

chart1.render(); 
chart2.render();

的jsfiddle（CanvasJS）：http://jsfiddle.net/nikdtu/x2fj6b9c/ 的jsfiddle（D3）：http://jsfiddle.net/nikdtu/4cyv2y0d/

來源

2017-02-02 11:03:23

不是我低估了你的答案，而是請告訴我爲什麼我的問題值得懷疑？另外，我不需要使用Canvas.js。我擁有使用D3.js製作的所有內容。現在只想把事情放在一個儀表板上，而不需要重新發明輪子。 – Dinosaurius

對於D3你可以參考另一個Stackoverflow問題的鏈接，我在答案中提到了這個問題。 JSFiddle：http://jsfiddle.net/nikdtu/4cyv2y0d/ –

是的，對於KeenIO你必須在他們的platform登記來創建項目（在你的情況 - 儀表板）。那裏有免費的有限選項。您也可以使用任何其他供應商來創建D3分析儀表板，如Sisense。

來源

2018-01-02 21:34:32 Victoria

使用D3.js圖表​​創建儀表板時的疑問

回答

相關問題

使用D3.js圖表創建儀表板時的疑問