Kategorie Skalierung auf Y-Achse und Zeit auf der X-Achse im Blasendiagramm in Chartjs

Ist es möglich, eine Kategorienskala auf der Y-Achse in Bubble chart zu haben? Ich versuche, ein Blasendiagramm zu erstellen, wo auf y-Achse-> Wochentage und x-Achse-> Zeit im Format "hh: mm a". (Nur weil Chart.js die Zeitskala nur auf der x-Achse zulässt). Bitte schlagen Sie vor, wie ich diese Frage ändern kann, um mehr Leuten zu helfen.Kategorie Skalierung auf Y-Achse und Zeit auf der X-Achse im Blasendiagramm in Chartjs

<body><canvas id="bubble" width="400" height="400"></canvas></body> 

<script> 


$(function() { 
    Chart.defaults.global.defaultFontColor = '#fff' 
    var bubbleBackgroundColor = function() { 
      return 'rgba(255, 206, 86, 0.2)' 
    }; 
    var bubbleBorderColor = function() { 
      return 'rgba(255, 206, 86, 1)' 
    }; 

    var bubbleChartData = { 
    animation: { 
     duration: 10000 
    }, 
    // Documentation says the tick values tick.min & tick.max must be in the Labels array. So thats what I have below 
    labels: ["Mon", "Tue", "wed", "Thu"], 
    datasets: [{ 
     label: "Requests and bookings", 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: bubbleBackgroundColor(), 
     borderColor: bubbleBorderColor(), 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: "rgba(75,192,192,1)", 
     pointBackgroundColor: "#fff", 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: "rgba(153, 102, 155, 0.2)", 
     pointHoverBorderColor: "rgba(153, 102, 155, 1)", 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     // how would the data change ...how can the numbers for y be replaced with strings 
     data:[{x: 2,y: 0,r: 15},{x: 3,y: 1,r: 19}, {x: 5,y: 2,r: 15}, {x: 4, y: 3,r: 18}] 
    }] 
    }; 


    var ctx = document.getElementById('bubble'); 
    var bubble = new Chart(ctx, { 
    type: 'bubble', 
    data: bubbleChartData, 
    options: { 
     responsive: true, 
     title: { 
     display: true, 
     text:'Weekly activity' 
     }, 
     options: { 
     scales: { 
      yAxes: [{ 
       // will this create y-axis with days of week? 
       type: 'Category', 
       position: 'bottom', 
       ticks: { 
       ticks.min: "Mon", 
       ticks.max: "Thu" 
       } 
      }], 
      xAxes: [{ 
       type: 'time', 
       time: { 
        displayFormats: { 
         minute: 'hh:mm a' 
        } 
       } 
      }] 
     } 
     } 
    } 
    }); 
}); 
</script>

Quelle

2016-07-04 jasonry

Dies ist möglich, in ChartJS, und wird mit dem angegebenen Code einmal ein paar Probleme behoben sind, arbeiten:

Die Optionen config die Waage enthält, ist innerhalb eines anderen Optionen Objekt. Dies bedeutet, dass die Optionen in dieser zweiten Ebene nicht wirksam werden.

options: { 
    responsive: true, 
    title: { 
    display: true, 
    text:'Weekly activity' 
    }, 
    scales: { 
    yAxes: [{ 
     // will this create y-axis with days of week? 
     type: 'Category', 
     position: 'bottom', 
     ticks: { 
      ticks.min: "Mon", 
      ticks.max: "Thu" 
     } 
    }], 
    xAxes: [{ 
     type: 'time', 
     time: { 
      displayFormats: { 
       minute: 'hh:mm a' 
      } 
     } 
    }] 
    } 
}

behebt dieses Problem

diesen

options: { 
    responsive: true, 
    title: { 
    display: true, 
    text:'Weekly activity' 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
      // will this create y-axis with days of week? 
      type: 'Category', 
      position: 'bottom', 
      ticks: { 
      ticks.min: "Mon", 
      ticks.max: "Thu" 
      } 
     }], 
     xAxes: [{ 
      type: 'time', 
      time: { 
       displayFormats: { 
        minute: 'hh:mm a' 
       } 
      } 
     }] 
    } 
    } 
}

zu dieser Änderung (durch den überschüssigen options Block entfernt)

Die Skala Art der x-Achse ist Category, die wegen der Großbuchstaben nicht nur ein anerkannter ChartJS scale type ist. Durch das Umbenennen des Typs in seinen Kleinbuchstaben category kann es von ChartJS erkannt werden.
Die Tick-Optionen sind falsch eingestellt und sind auch ungültige Eigenschaftsnamen, was ChartJS daran hindert, zu funktionieren.

Dokumentation sagt, dass die Zecke Werte tick.min & tick.max in der Etiketten-Array sein muss.

Ab sofort ticks.min und ticks.max sind für Klassenskalen optional. wenn Sie möchte jedoch weiterhin ticks.min und ticks.max verwenden, können Sie dies tun:

ändern

ticks: { 
    ticks.min: "Mon", 
    ticks.max: "Thu" 
}

ticks: { 
    min: "Mon", 
    max: "Thu" 
}

Obwohl es nicht so klar war, wie es hätte sein können in der offiziellen Dokumentation ist das gemeint, wenn die Optionen ticks.min und ticks.max angegeben sind - anstatt die vorherige ticks.ticks.min zu haben, können wir nun auf unsere Einstellungen unterzugreifen.

Die für die Achse category eingestellten Beschriftungen betreffen derzeit alle Achsen und nicht nur die y-Achse (Kategorie). Wir können dies beheben, indem wir yLabels anstelle von labels als shown in the documentation setzen.

ändern

labels: ["Mon", "Tue", "wed", "Thu"],

yLabels: ["Mon", "Tue", "wed", "Thu"],

sowohl die x- und y-Achsen auf der Unterseite eine verstümmelte Tabelle erzeugt. Dies kann behoben werden, indem die Y-Achse wieder nach links bewegt wird.

ändern

type: 'category', 
position: 'bottom', 
ticks: {

type: 'category', 
position: 'left', 
ticks: {

Es sieht jetzt so etwas wie folgt aus:

Wir haben jetzt eine Arbeitsblasendiagramm haben! Die Y-Achse zeigt Wochentage und die X-Achse einen Zeitwert, der in 'hh: mm a' formatiert ist. Hier ist die Probe beendet codepen: http://codepen.io/albinodrought/pen/VmNwoj

Als Reaktion auf die Begründung für diese Art von Grafik,

(nur weil Chart.js erlaubt Zeitplan nur auf der x-Achse)

Es gibt auch Abhilfen für das Plotten Zeitplan Werte auf der y-Achse zu sein scheint: ChartJS issue #2791

Hauptsächlich, Setzen Sie den Y-Wert Ihrer Datenpunkte auf einen Zeitformatwert (Epoche) und ändern Sie dann den Rückruf Ihrer Y-Achse, um diese Werte zu formatieren. Siehe ChartJS docs for setting tick callbacks.

Quelle

2016-12-21 19:12:56 AlbinoDrought

aus irgendeinem Grund, den ich derzeit nicht verstehe, haben die oben genannten Lösungen einen Nachteil: Die Daten werden nicht basierend auf der Y-Achse, die Wochentage abgestimmt. Wenn Sie zu codepen.io gehen und nur das erste Datenobjekt von {x: 2, y: 0, r: 15} zu {x: 2, y: 4, r: 15} ändern, bleibt der Datenpunkt in der ersten "Reihe" nahe Montag, aber es sollte zu Donnerstag ändern. Ich bin derzeit auch mit diesem Problem beschäftigt und habe keine Problemumgehung gefunden. –

@AlbinoDrought: Hallo, danke für deine Lösung, gibt es da eh x: moment (etwas)? Ich habe es nicht geschafft, die richtigen x-Daten zu haben, obwohl mein Moment-Objekt richtig ist. – Hetana

Kategorie Skalierung auf Y-Achse und Zeit auf der X-Achse im Blasendiagramm in Chartjs

Antwort

Verwandte Themen