Chart.js - Несколько диаграмм пончика на том же холсте

Я пытаюсь имитировать многослойную диаграмму пончиков, инициализируя Chart.js несколько раз поверх того же холста. В то время есть только одна диаграмма. Другой будет виден, когда вы наведете над своим положением ...Chart.js - Несколько диаграмм пончика на том же холсте

Кто-нибудь знает, как сделать одновременно видимыми одновременно?

Вот мой код:

<!doctype html> 
<html> 
    <head> 
     <title>Doughnut Chart</title> 
     <script src="../Chart.js"></script> 
     <style> 
      body{ 
       padding: 0; 
       margin: 0; 
      } 
      #canvas-holder-1{ 
       position: fixed; 
       top: 50%; 
       left: 50%; 
       margin-top: -250px; 
       margin-left: -250px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas-holder-1"> 
      <canvas id="chart-area" width="500" height="500"/> 
     </div> 
<script> 

     var doughnutData = [ 
       { 
        value: 20, 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: "Red", 
       }, 
       { 
        value: 50, 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: "Green" 
       }, 
       { 
        value: 30, 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: "Yellow" 
       }, 
       { 
        value: 40, 
        color: "#949FB1", 
        highlight: "#A8B3C5", 
        label: "Grey" 
       }, 
       { 
        value: 120, 
        color: "#4D5360", 
        highlight: "#616774", 
        label: "Dark Grey" 
       } 

      ]; 
      var doughnutData2 = [ 
       { 
        value: 10, 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: "Red", 
       }, 
       { 
        value: 100, 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: "Green" 
       }, 
       { 
        value: 20, 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: "Yellow" 
       }, 
       { 
        value: 60, 
        color: "#949FB1", 
        highlight: "#A8B3C5", 
        label: "Grey" 
       }, 
       { 
        value: 120, 
        color: "#4D5360", 
        highlight: "#616774", 
        label: "Dark Grey" 
       } 

      ]; 

      window.onload = function(){ 
       var ctx = document.getElementById("chart-area").getContext("2d"); 
       window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { 
        responsive : false, 
        animateScale: false, 
        animateRotate:false, 
        animationEasing : "easeOutSine", 
        animationSteps : 80, 
        percentageInnerCutout : 90, 
       }); 
       myDoughnut.outerRadius= 200; 
       window.myDoughnut2 = new Chart(ctx).Doughnut(doughnutData2, { 
        responsive : false, 
        animateScale: false, 
        animateRotate:false, 
        animationEasing : "easeOutSine", 
        animationSteps : 80, 
        percentageInnerCutout : 90 
            }); 
      }; 



    </script> 
    </body> 
</html>

Спасибо, Jochen

источник

2015-06-16 Jochen Fuchs

Есть 2 элементы холста и расположить их друг над другом с помощью CSS. Внутренний холст имеет внутренний пончик и имеет закругленные границы, так что он покрывает как можно меньше наружного пончика.

Просмотр

HTML

<div id="w"> 
    <canvas id="d1" height="400" width="400"></canvas> 
    <canvas id="d2" height="320" width="320"></canvas> 
</div>

CSS

#w { 
    position: relative; 
    height: 400px; 
    width: 400px; 
} 

#d1, #d2 { 
    position: absolute; 
} 

#d1 { 
    top: 0px; 
    left: 0px; 
} 

#d2 { 
    border-radius: 150px; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Fiddle - https://jsfiddle.net/rhLxawt5/

На данный момент у нас есть достаточно приличная глядя круговой диаграмма с не перекрывающимися пончиками, однако наши подсказки будут получать обрезаны, потому что они все еще часть своих полотен.

Мы можем обойти это, написав функцию customTooltips, чтобы использовать div вместо рисования прямоугольника внутри холста.

Fiddle - https://jsfiddle.net/rca0ync3/

источник

2015-06-16 12:56:48 potatopeelings

Привет, спасибо. К несчастью, я нуждаюсь в них гораздо ближе, вот так: [link] http://lorenzundfuchs.de/chartjs/test/double_doughnut.png –

Обновили ответ. Проверьте новую скрипку. – potatopeelings

проблема в том, что меньший холст перекрывает больший пончик. поэтому он не может быть нажат в углах. вот почему я попытался использовать только одно полотно http://lorenzundfuchs.de/chartjs/test/overlap.png –

Вы можете использовать несколько наборов данных, проверка диаграмм JS демонстрационной страницы:

http://www.chartjs.org/samples/latest/charts/doughnut.html

Кроме того, здесь приведен пример с несколькими наборами данных и несколькими ярлыками также:

https://jsfiddle.net/moe2ggrd/1/

Важная часть:

... 
    var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ["Green", "Yellow", "Red", "Purple", "Blue"], 
     datasets: [{ 
     data: [1, 2, 3, 4, 5], 
     backgroundColor: [ 
      'green', 
      'yellow', 
      'red', 
      'purple', 
      'blue', 
     ], 
     labels: [ 
      'green', 
      'yellow', 
      'red', 
      'purple', 
      'blue', 
     ] 
     }, { 
     data: [6, 7, 8], 
     backgroundColor: [ 
      'black', 
      'grey', 
      'lightgrey' 
     ], 
     labels: [ 
      'black', 
      'grey', 
      'lightgrey' 
     ], 
     }, ] 
    }, 
    ...

Надеюсь, это поможет кому-то, кто пытается сделать то же самое.

источник

2017-10-02 08:33:58 tonix

Chart.js - Несколько диаграмм пончика на том же холсте

ответ

Смежные вопросы