Пожалуйста, подумайте о человеке, отвечающем на ваш вопрос, вы говорите «настроить», но это может означать что угодно, пожалуйста, будьте настолько конкретны, насколько это возможно, чтобы люди могли вам помочь.являются достаточно полными, и мы все еще опираемся на них, поэтому предложения приветствуются, особенно если есть что-то существенное, что вам не хватает.
Если вы хотите настроить цвета диаграммы, вы можете использовать CSS дляизменить фон всей диаграммы, как это сделано в этой демонстрации :
#chartdiv {
background-color:#121212;
}
Также показано, как отключить линию сетки, если вы заинтересованы в этом:
axis.renderer.grid.template.disabled = true;
Аналогичным образом можно отключить другие элементы оси, например их метки (эта ссылка является частью общего руководства по осям в целом) .
Если вы хотите настроить цвета, сначала обратитесь к нашему руководству по цветам , поскольку вы будете использовать JavaScript для окраски SVG, а не CSS.Обычно атрибутами SVG, к которым будут применяться цвета, являются их атрибуты fill и stroke.Хотя вы можете использовать ключевые слова, шестнадцатеричные строки и строки rgb, в некоторых редких случаях это может привести к потере цветов, анимируемых между состояниями.Поэтому, если это не проблема, попробуйте использовать класс am4core.Color (am4core.color - это удобный метод для создания экземпляра Color, обратите внимание на разницу в верхнем / нижнем регистре).
Чтобы настроить цвета области графика, для XYCharts установлено свойство plotContainer по умолчанию, вы можете назначить fill свойству background первого дочернего элемента, например:
chart.plotContainer.children.getIndex(0).background.fill = am4core.color({ r: 17, g: 27, b: 54 }).brighten(0.2);
Переменные цвета см. В нашем руководстве. "Переменные оси заполняет" .
Чтобы перевернуть оси, просто поменяйте местами оси x / y, т.е. вместо переменных xAxisи yAxis в исходном демо, на которое вы ссылались, я изменил их на valueAxis на оси x и categoryAxis на оси y (изменив экземпляры с {categoryX} на {categoryY} и {valueX} на {valueY}, говоря о том, что если вы хотите настроить текст меток и всплывающих подсказок, вы можете узнать о форматировании строк в v4 ).Это поднимет график так, что он снизу вверх> выровнен по левому краю.Если вы хотите, чтобы диаграмма была привязана вправо, установите inversed свойство *1051* средства визуализации оси x на true:
valueAxis.renderer.inversed = true;
Вот пример вашей демонстрации с большой частьювышеупомянутое в сочетании:
https://codepen.io/team/amcharts/pen/9801ece19a15b7f3c72c5b6af501bcb9