대화형 차트 만들기: Plotly.js를 사용하여 원형 차트 및 대시보드 차트 만들기, 5부-JS 튜토리얼-php.cn

대화형 차트 만들기: Plotly.js를 사용하여 원형 차트 및 대시보드 차트 만들기, 5부

王林

풀어 주다： 2023-09-03 15:33:19

원래의

1099명이 탐색했습니다.

대화형 차트 만들기: Plotly.js를 사용하여 원형 차트 및 대시보드 차트 만들기, 5부

이 시리즈를 처음부터 지켜보신 분이라면 Plotly.js가 동일한 scatter 类型来创建折线图和气泡图。唯一的区别是，我们在创建折线图时必须将 mode 设置为 lines，而在创建气泡图时必须将 markers 设置为 mode을 사용한다는 것을 눈치채셨을 것입니다.

마찬가지로 Plotly.js를 사용하면 type 속성에 동일한 값을 사용하고 만들고 싶은 차트에 따라 다른 속성의 값을 변경하여 원형 차트, 도넛 차트, 게이지 차트를 만들 수 있습니다.

Plotly.js에서 원형 차트 만들기

type 属性设置为 pie 来在 Plotly.js 中创建饼图。还有其他属性，例如 opacity、visible 和 name 也是其他图表类型所共有的。 name 属性用于提供当前饼图跟踪的名称。该名称随后显示在图例中以供识别。您可以通过将 showlegend 属性分别设置为 true 或 false 来显示或隐藏图表图例中的饼图跟踪。您可以使用 labels 속성을 pie로 설정하여 Plotly.js에서 원형 차트를 만들 수 있습니다. 다른 차트에도 불투명도, visible 및 name과 같은 다른 속성이 있습니다. 유형에 공통적입니다. name 속성은 현재 파이 추적의 이름을 제공하는 데 사용됩니다. 이 이름은 식별을 위해 범례에 표시됩니다. showlegend 속성을 각각 true 또는 false로 설정하여 이를 표시할 수 있습니다. 또는 차트 범례에서 원형 차트 추적을 숨깁니다. labels 속성을 사용하여 원형 차트의 다양한 부분에 대한 레이블 이름을 설정할 수 있습니다.

원형 차트의 경우 마커 개체를 사용하여 차트의 여러 부분의 모양을 제어합니다. marker 中的 color 属性可用于设置饼图每个扇区的颜色。不同扇区的颜色可以指定为 color 속성 내에 중첩된 배열 값입니다.

선 개체 내에 중첩된 color 和 width 属性来设置包围每个扇区的所有线条的颜色和宽度。您还可以选择使用布尔值 sort 属性对饼图的所有扇区从大到小进行排序。同样，借助 direction 属性，可以将扇区的方向更改为 顺时针 或 逆时针 을 사용할 수도 있습니다.

다음 코드는 세계 상위 5개 국가의 산림 면적을 나열하는 기본 원형 차트를 만듭니다.

으아아아

보시다시피, 저희는 더 이상 x 和 y 属性来指定我们要绘制的点。现在，这是在 values 和 labels의 도움으로 이 일을 하고 있지 않습니다. 백분율은 입력된 값에 따라 자동으로 결정됩니다.

기본적으로 원형 차트의 첫 번째 조각은 12시에서 시작됩니다. -360에서 360 사이의 값을 허용하는 rotation 속성을 사용하여 차트의 시작 각도를 변경할 수 있습니다. 기본 12시 값은 각도 0과 같습니다.

차트의 특정 부분을 돋보이게 하려면 pull 属性，该属性可以接受一个数字或值在 0 到 1 之间的数字数组。 pull 속성을 사용하여 원형 차트에서 특정 섹터를 꺼낼 수 있습니다. 당기는 거리는 파이 또는 도넛의 더 큰 반경의 일부와 같습니다.

hole 속성 값을 지정하면 원형 차트를 도넛 차트로 변환하는 것이 매우 쉽습니다. 파이 차트에서 주어진 반경 부분을 잘라내어 도넛 차트를 만듭니다.

마커 개체 내에 중첩된 colors 属性来控制饼图中各个扇区的颜色。还可以借助嵌套在线条对象内的 width 和 color 속성을 사용하여 각 섹터를 둘러싼 선의 너비와 색상을 변경할 수 있습니다. 경계선의 기본 너비는 0입니다. 이는 기본적으로 섹터 주위에 선이 그려지지 않음을 의미합니다.

각각의 hovertext 属性，可用于为每个单独的扇区提供一些额外的文本信息。当观看者将鼠标悬停在某个扇区上时，他们将可以看到这些信息。显示文本的条件之一是 hoverinfo 属性应包含 text 标志。您可以使用嵌套在 family、size 和 color 属性来设置饼图扇区内部或外部的文本颜色"inline">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});

로그인 후 복사

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