Изменить цвет фона графика

Question

Изменить цвет фона графика

1

Ищете советы о том, как изменить цвет фона сюжета на прозрачный?

Я просмотрел документы, но не нашел ссылок.

pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    backgroundColor: "rgba(255,255,255,0.5)",
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);

#plot {
  background-color: lightblue;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>

Idan 14 июнь 2018, в 11:03

Источник

1

Используйте paper_bgcolor: "rgba(0,0,0,0)" в макете, и ваша проблема решена, я думаю!
Naren Murali 14 июнь 2018, в 12:39

Теги:

javascript

plotly

2 ответа

1

pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);

#plot {
  background-color: lightblue !important;
}
.main-svg {
   background-color: transparent !important;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>

Это то, что вы ищете? Надеюсь, поможет!!

Sidhanshu_ 14 июнь 2018, в 06:06

0

Вы знаете, да, и нет. Я пробовал это, но тупо не получилось. Это нормально, но я все еще задаюсь вопросом, есть ли лучший способ, чем important
Idan 14 июнь 2018, в 09:11
0

Дело в том, что мы должны переопределить настройки стиля по умолчанию для этого графика. Важное ключевое слово делает то же самое!
Sidhanshu_ 14 июнь 2018, в 09:13
0

@Sidhanshu_ Существует графическое свойство для установки цвета фона макета. в макете просто 'layout': { width: 320, bgcolor: "rgb(0,0,0,0)" } и удалите css .main-svg { background-color: transparent !important; } также сюжет css не требует !important я думаю
Naren Murali 14 июнь 2018, в 10:13
0

@NarenMurali Я попробовал это. Но по умолчанию все еще переопределяли данный стиль фона!
Sidhanshu_ 14 июнь 2018, в 10:43
0

@Sidhanshu_ Мой плохой, свойство paper_bgcolor: "rgba(0,0,0,0)"
Naren Murali 14 июнь 2018, в 10:57
0

Ох, ну ладно! узнал что-то новое .. спасибо дружище!
Sidhanshu_ 14 июнь 2018, в 11:27

Показать ещё 4 комментария

Ещё вопросы

Используйте paper_bgcolor: "rgba(0,0,0,0)" в макете, и ваша проблема решена, я думаю!
Вы знаете, да, и нет. Я пробовал это, но тупо не получилось. Это нормально, но я все еще задаюсь вопросом, есть ли лучший способ, чем important
Дело в том, что мы должны переопределить настройки стиля по умолчанию для этого графика. Важное ключевое слово делает то же самое!
@Sidhanshu_ Существует графическое свойство для установки цвета фона макета. в макете просто 'layout': { width: 320, bgcolor: "rgb(0,0,0,0)" } и удалите css .main-svg { background-color: transparent !important; } также сюжет css не требует !important я думаю
@NarenMurali Я попробовал это. Но по умолчанию все еще переопределяли данный стиль фона!
@Sidhanshu_ Мой плохой, свойство paper_bgcolor: "rgba(0,0,0,0)"
Ох, ну ладно! узнал что-то новое .. спасибо дружище!

Naren Murali · Accepted Answer · 2018-06-14T13-10-00.000Z

Используйте свойство paper_bgcolor layout чтобы сделать его transparent.

paper_bgcolor (цвет):
default: "#fff"
Устанавливает цвет бумаги, на которой нарисован график.

Из официальной документации, доступной здесь

pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    paper_bgcolor: "rgba(0,0,0,0)",
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);

#plot {
  background-color: lightblue;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>