如何制作多張圖的繪圖儀圖？

Question

我正在按照這個方向（教程）制作繪圖儀表圖

（ https://plot.ly/python/gauge-charts/ ）。

但是似乎只能在屏幕上創建一個圖表。

您知道如何制作多個圖表，這些圖表在一個屏幕（一個html文件）中包含這些儀表圖嗎？

因此，我想在一個屏幕中創建多個儀表。

非常感謝！

這就是代碼。

import plotly
import plotly.plotly as py
import plotly.graph_objs as go

from plotly.offline import plot


import plotly.plotly as py
import plotly.graph_objs as go

base_chart = {
    "values": [40, 10, 10, 10, 10, 10, 10],
    "labels": ["-", "0", "20", "40", "60", "80", "100"],
    "domain": {"x": [0, .48]},
    "marker": {
        "colors": [
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)'
        ],
        "line": {
            "width": 1
        }
    },
    "name": "Gauge",
    "hole": .4,
    "type": "pie",
    "direction": "clockwise",
    "rotation": 108,
    "showlegend": False,
    "hoverinfo": "none",
    "textinfo": "label",
    "textposition": "outside"
}


meter_chart = {
    "values": [50, 10, 10, 10, 10, 10],
    "labels": ["Days" + "<br>" + "haaga", "How", "Many", "Days", "Are", "Left"],
    "marker": {
        'colors': [
            'rgb(255, 255, 255)',
            'rgb(226,126,64)',
            'rgb(223,162,103)',
            'rgb(223,189,139)',
            'rgb(226,210,172)',
            'rgb(232,226,202)'

        ]
    },
    "domain": {"x": [0, 0.48]},
    "name": "Days Guage",
    "hole": .3,
    "type": "pie",
    "direction": "clockwise",
    "rotation": 90,
    "showlegend": False,
    "textinfo": "label",
    "textposition": "inside",
    "hoverinfo": "none",


}


layout = {
    'xaxis': {
        'showticklabels': False,
        'showgrid': False,
        'zeroline': False,
    },
    'yaxis': {
        'showticklabels': False,
        'showgrid': False,
        'zeroline': False,
    },
    'shapes': [
        {
            'type': 'path',
            'path': 'M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z',
            'fillcolor': 'rgba(44, 160, 101, 0.5)',
            'line': {
                'width': 0.5
            },
            'xref': 'paper',
            'yref': 'paper'
        }
    ],
    'annotations': [
        {
            'xref': 'paper',
            'yref': 'paper',
            'x': 0.23,
            'y': 0.45,
            'text': '50',
            'showarrow': False
        }
    ]
}

# we don't want the boundary now
base_chart['marker']['line']['width'] = 0

fig = {"data": [base_chart, meter_chart],
       "layout": layout}
plot(fig, filename='gauge-meter-chart')

Answer 1

問題在於，刻度線是作為布局下的shape對象生成的，這可以通過對x和y位置進行一些較小的計算而輕松實現。 請參考下面的示例，在該示例中，我使用for loop定義列數，並將形狀和注釋放置在正確的位置。

注意：我僅對列執行此操作，請應用邏輯並使它對行也有效，如果這樣做，請也發布您的解決方案，以便將來人們參考！！

請嘗試以下代碼，讓我知道您的問題是否已解決！

import plotly
import plotly.plotly  as py
import numpy as np
import pandas as pd
import plotly.offline as py_offline
import plotly.graph_objs as go
py_offline.init_notebook_mode()

base_chart = {
    "values": [40, 10, 10, 10, 10, 10, 10],
    "labels": ["-", "0", "20", "40", "60", "80", "100"],
    "domain": {"x": [0, .48]},
    "marker": {
        "colors": [
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)',
            'rgb(255, 255, 255)'
        ],
        "line": {
            "width": 1
        }
    },
    "name": "Gauge",
    "hole": .4,
    "type": "pie",
    "direction": "clockwise",
    "rotation": 108,
    "showlegend": False,
    "hoverinfo": "none",
    "textinfo": "label",
    "textposition": "outside"
}


meter_chart = {
    "values": [50, 10, 10, 10, 10, 10],
    "labels": ["Days" + "<br>" + "haaga", "How", "Many", "Days", "Are", "Left"],
    "marker": {
        'colors': [
            'rgb(255, 255, 255)',
            'rgb(226,126,64)',
            'rgb(223,162,103)',
            'rgb(223,189,139)',
            'rgb(226,210,172)',
            'rgb(232,226,202)'

        ]
    },
    "domain": {"x": [0, 0.48]},
    "name": "Days Guage",
    "hole": .3,
    "type": "pie",
    "direction": "clockwise",
    "rotation": 90,
    "showlegend": False,
    "textinfo": "label",
    "textposition": "inside",
    "hoverinfo": "none",


}


layout = {
    'xaxis': {
        'showticklabels': False,
        'showgrid': False,
        'zeroline': False
    },
    'yaxis': {
        'showticklabels': False,
        'showgrid': False,
        'zeroline': False
    },
    'shapes': [],
    'annotations': []
}
base_shape = {
                'type': 'path',
                'path': 'M 0.49 0.5 L 0.5 0.65 L 0.51 0.5 Z',
                'fillcolor': 'rgba(44, 160, 101, 0.5)',
                'line': {
                    'width': 0.5
                },
                'xref': 'paper',
                'yref': 'paper'
            }

base_annotation = {
                        'xref': 'paper',
                        'yref': 'paper',
                        'x': 0,
                        'y': 0.45,
                        'text': '50',
                        'showarrow': False
                    }

arr = []
columns = 4
tick_width = 0.009
increment = 1/columns
initial = 0
for i in range(columns):
    basechart = copy.deepcopy(base_chart)
    meterchart = copy.deepcopy(meter_chart)
    start = initial
    end = initial + increment
    basechart['domain']['x'] = [start, end]
    meterchart['domain']['x'] = [start, end]
    # code for placing the tick on each of the dials
    shape = copy.deepcopy(base_shape)
    temp = (start + (increment/2))
    shape['path'] = 'M '+str(temp-tick_width/2)+' 0.5 L '+str(temp)+' 0.59 L '+str(temp+tick_width/2)+' 0.5 Z'
    layout['shapes'].append(shape)
    # code for placing the value annotation on each of the dials
    annotation = copy.deepcopy(base_annotation)
    annotation['x'] = temp
    layout['annotations'].append(annotation)
    arr.append(basechart)
    arr.append(meterchart)
    initial = end

# we don't want the boundary now
base_chart['marker']['line']['width'] = 0

fig = {"data": arr,
       "layout": layout}
py_offline.iplot(fig, filename='gauge-meter-chart')