インタラクティブなグラフの作成: Plotly.js を使用した円グラフとダッシュボード グラフの作成、パート 5

このシリーズを最初からご覧になっている方は、Plotly.js が同じ scatter タイプを使用して折れ線グラフとバブル チャートを作成していることに気づいたかもしれません。唯一の違いは、折れ線グラフを作成する場合は mode を lines に設定し、バブル チャート モード を作成する場合は markers を に設定する必要があることです。 。

同様に、Plotly.js では、type プロパティに同じ値を使用し、作成するグラフに応じて他のプロパティの値を変更することで、円グラフ、ドーナツ グラフ、およびゲージ グラフを作成できます。作りたい。

Plotly.js で円グラフを作成する

Plotly.js で円グラフを作成するには、type プロパティを pie に設定します。 opacity、visible、name など、他のグラフ タイプにも共通のプロパティもあります。 name 属性は、現在の円グラフ トレースの名前を提供するために使用されます。この名前は、識別のために凡例に表示されます。 showlegend プロパティを true または false にそれぞれ設定することで、グラフの凡例で円グラフ トレースを表示または非表示にできます。 labels 属性を使用して、円グラフのさまざまな部分にラベル名を設定できます。

円グラフの場合、マーカー オブジェクトはグラフのさまざまな部分の外観を制御するために使用されます。 marker 内にネストされた color プロパティを使用して、円グラフの各スライスの色を設定できます。さまざまなセクターの色は、color プロパティの配列値として指定できます。

線オブジェクト内にネストされた color プロパティと width プロパティを使用して、各セクターを囲むすべての線の色と幅を設定することもできます。ブール値の sort プロパティを使用して、円グラフのすべてのスライスを最大から最小の順に並べ替えるオプションもあります。同様に、direction プロパティを使用すると、セクターの方向を 時計回り または 反時計回り に変更できます。

次のコードは、世界上位 5 か国の森林面積をリストする基本的な円グラフを作成します。

リーリー

ご覧のとおり、プロットする点を指定するために x プロパティと y プロパティを使用しなくなりました。これは、values と labels を使用して行われます。パーセンテージは、入力された値に基づいて自動的に決定されます。

デフォルトでは、円グラフの最初のスライスは 12 時に始まります。 rotation プロパティを使用してチャートの開始角度を変更できます。このプロパティは -360 から 360 までの値を受け入れます。デフォルトの 12 時の値は角度 0 と同じです。

グラフ内の特定の部分を目立たせる場合は、数値または 0 から 1 までの値を持つ数値の配列を受け入れる pull プロパティを使用できます。 pull プロパティは、円グラフから指定されたセクターをプルするために使用されます。引っ張る距離は、パイまたはドーナツの大きい方の半径の一部に等しくなります。

hole 属性の値を指定することで、円グラフをドーナツ グラフに変換するのは非常に簡単です。円グラフから指定した半径部分を切り取ってドーナツグラフを作成します。

マーカー オブジェクト内にネストされた colors プロパティを使用して、円グラフの個々のセクターの色を制御できます。線オブジェクト内にネストされている width プロパティと color プロパティを使用して、各セクターを囲む線の幅と色を変更することもできます。境界線のデフォルトの幅は 0 です。これは、デフォルトではセクターの周囲に線が描画されないことを意味します。

個々のセクターごとに追加のテキスト情報を提供するために使用できる hovertext 属性もあります。この情報は、視聴者がセクターの上にマウスを移動すると表示されます。テキストを表示するための条件の 1 つは、hoverinfo 属性に text フラグが含まれている必要があることです。 にネストされている <code class="中的">family、size、および color プロパティを使用して、円グラフのセクターの内側または外側のテキストの色を設定できます。 insidetextfont と outsidetextfont はそれぞれオブジェクトです。

以下代码使用之前饼图中的数据来创建一个圆环图，该圆环图使用我们刚刚了解的其他属性。

var pieDiv = document.getElementById("pie-chart");

var traceA = {
  type: "pie",
  values: [8149300, 4916438, 4776980, 3100950, 2083210],
  labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'],
  hole: 0.25,
  pull: [0.1, 0, 0, 0, 0],
  direction: 'clockwise',
  marker: {
    colors: ['#CDDC39', '#673AB7', '#F44336', '#00BCD4', '#607D8B'],
    line: {
      color: 'black',
      width: 3
    }
  },
  textfont: {
    family: 'Lato',
    color: 'white',
    size: 18
  },
  hoverlabel: {
    bgcolor: 'black',
    bordercolor: 'black',
    font: {
      family: 'Lato',
      color: 'white',
      size: 18
    }
  }
};

var data = [traceA];

var layout = {
  title: "Area Under Forest for Different Countries"
};

Plotly.plot(pieDiv, data, layout);

在 Plotly.js 中创建仪表图表

仪表图的基本结构与圆环图类似。这意味着我们可以使用一些巧妙选择的值并通过仍然将 type 属性设置为 pie 来创建简单的仪表图表。基本上，我们将隐藏整个饼图的某些部分，使其看起来像仪表图。

首先，我们需要为 values 属性选择一些值。为了简单起见，我将使用饼图的上半部分作为我的仪表图。这意味着这些值应该在我想要可见的部分和我想要隐藏的饼图部分之间平均分配。图表的可见部分可以进一步分为更小的部分。以下是为仪表图表选择值的示例。

values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100]

上行中的数字 100 是任意的。可以看到，前五个切片加起来是100，这也是为饼图隐藏区域设置的值。这将整个馅饼平均分为隐藏部分和可见部分。

这是创建基本仪表图表的完整代码。您应该注意到，我已将应隐藏的扇区的颜色属性设置为白色。同样，相应扇区的 text 和 labels 值也已设置为空字符串。 rotation 属性已设置为 90，以便图表不会从默认的 12 点钟位置绘制。

var gaugeDiv = document.getElementById("gauge-chart");

var traceA = {
  type: "pie",
  showlegend: false,
  hole: 0.4,
  rotation: 90,
  values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100],
  text: ["Very Low", "Low", "Average", "Good", "Excellent", ""],
  direction: "clockwise",
  textinfo: "text",
  textposition: "inside",
  marker: {
    colors: ["rgba(255, 0, 0, 0.6)", "rgba(255, 165, 0, 0.6)", "rgba(255, 255, 0, 0.6)", "rgba(144, 238, 144, 0.6)", "rgba(154, 205, 50, 0.6)", "white"]
  },
  labels: ["0-10", "10-50", "50-200", "200-500", "500-2000", ""],
  hoverinfo: "label"
};

代码的下一部分涉及仪表图表的指针。您为 Degrees 变量设置的值将确定绘制针的角度。 radius 变量决定针的长度。属性 x0 和 y0 用于设置线条的起点。同样，属性 x1 和 y1 用于设置线条的终点。

您可以借助 SVG 路径为针创建更复杂的形状。您所要做的就是将 type 属性设置为 path 并使用 path 属性指定实际路径。您可以在参考的布局形状部分阅读更多相关信息。

var degrees = 115, radius = .6;
var radians = degrees * Math.PI / 180;
var x = -1 * radius * Math.cos(radians);
var y = radius * Math.sin(radians);

var layout = {
  shapes:[{
      type: 'line',
      x0: 0,
      y0: 0,
      x1: x,
      y1: 0.5,
      line: {
        color: 'black',
        width: 8
      }
    }],
  title: 'Number of Printers Sold in a Week',
  xaxis: {visible: false, range: [-1, 1]},
  yaxis: {visible: false, range: [-1, 1]}
};

var data = [traceA];

Plotly.plot(gaugeDiv, data, layout, {staticPlot: true});

本节的所有代码都会创建以下仪表图表。目前，该图表不是很奇特，但它可以作为一个很好的起点。

最终想法

在本教程中，您学习了如何使用 Plotly.js 中的 pie 跟踪类型创建饼图和圆环图。您还学习了如何仔细设置一些属性的值，以将这些饼图转换为简单的仪表图。您可以在参考页面上阅读有关饼图及其不同属性的更多信息。

这是我们的交互式 Plotly.js 图表系列的最后一个教程。第一个介绍性教程为您提供了该库的概述。第二、第三和第四教程分别向您展示了如何创建折线图、条形图和气泡图。我希望您喜欢本教程以及整个系列。如果您有任何疑问，请随时在评论中告诉我。

以上がインタラクティブなグラフの作成: Plotly.js を使用した円グラフとダッシュボード グラフの作成、パート 5の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。