AnyChart 模板：如何只设置一次列的颜色？答案

【问题标题】：AnyChart Template: How can I set the colour of a column only once?AnyChart 模板：如何只设置一次列的颜色？
【发布时间】：2023-02-18 02:45:46
【问题描述】：

我正在使用 AnyChart 并尝试将图表设置为具有绿色和红色列。现在我必须在每一列上设置颜色。有没有办法为所有人设置它？

我在做什么：

var data = anychart.data.set([
                ["04/24/2022", 2, 6, "#ab0000", "#009933"],
                ["04/25/2022", 3, 4, "#ab0000", "#009933"],
                ["04/26/2022", 4, 2, "#ab0000", "#009933"],
                ["04/27/2022", 5, 2, "#ab0000", "#009933"],
                ["04/28/2022", 5, 2, "#ab0000", "#009933"]
            ]);

完整代码：

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"> </script>
</head>

<body>

    <div id="anychart-embed-samples-bct-stacking-02" class="anychart-embed anychart-embed-samples-bct-stacking-02">
        <script
            src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
        <script
            src="https://cdn.anychart.com/releases/8.11.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
        <script
            src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
        <div id="ac_style_samples-bct-stacking-02" style="display:none;">
            html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            }
        </div>
        <script>(function () {
                function ac_add_to_head(el) {
                    var head = document.getElementsByTagName('head')[0];
                    head.insertBefore(el, head.firstChild);
                }
                function ac_add_link(url) {
                    var el = document.createElement('link');
                    el.rel = 'stylesheet'; el.type = 'text/css'; el.media = 'all'; el.href = url;
                    ac_add_to_head(el);
                }
                function ac_add_style(css) {
                    var ac_style = document.createElement('style');
                    if (ac_style.styleSheet) ac_style.styleSheet.cssText = css;
                    else ac_style.appendChild(document.createTextNode(css));
                    ac_add_to_head(ac_style);
                }
                ac_add_link('https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css?hcode=a0c21fc77e1449cc86299c5faa067dc4');
                ac_add_style(document.getElementById("ac_style_samples-bct-stacking-02").innerHTML);
                ac_add_style(".anychart-embed-samples-bct-stacking-02{width:600px;height:450px;}");
            })();</script>
        <div id="container"
            style="width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid">
        </div>
        <script>
            anychart.onDocumentReady(function () {

                // create a data set
                var data = anychart.data.set([
                    ["04/24/2022", 2, 6, "#ab0000", "#009933"],
                    ["04/25/2022", 3, 4, "#ab0000", "#009933"],
                    ["04/26/2022", 4, 2, "#ab0000", "#009933"],
                    ["04/27/2022", 5, 2, "#ab0000", "#009933"],
                    ["04/28/2022", 5, 2, "#ab0000", "#009933"]
                ]);

                // map the data
                var seriesData_1 = data.mapAs({ x: 0, value: 1, fill: 3 });
                var seriesData_2 = data.mapAs({ x: 0, value: 2, fill: 4 });

                // create a chart
                var chart = anychart.column();

                chart.xScroller(true);

                /* enable the percent stacking mode
                on the default primary value scale*/
                chart.yScale().stackMode("percent");

                // set the tick interval on the value scale
                chart.yScale().ticks().interval(20);

                // create column series
                chart.column(seriesData_1);
                chart.column(seriesData_2);

                // configure labels on the x-axis
                chart.xAxis().title("Date");

                // configure labels on the y-axis
                chart.yAxis().labels().format("{%value}%");
                chart.yAxis().title("Down Percentage");

                // configure tooltips
                chart.tooltip().format("{%yPercentOfCategory}{decimalsCount:2}%");

                // set the chart title
                chart.title("Wifi Up Percentage");

                // set the container id
                chart.container("container");

                // initiate drawing the chart
                chart.draw();
            });
        </script>
    </div>
</body>

</html>

我正在寻找一种不需要一遍又一遍地复制颜色的方法。有谁知道如何将填充颜色格式化为仅在列数据中？

【问题讨论】：

标签： javascript anychart

【解决方案1】：

有一种方法可以解决 AnyChart 的问题。

你可以preconfigure colors with AnyChart Palettes.

// apply a palette to a chart
chart.palette(["#ab0000", "#009933"]);

欢迎在游乐场探索how to apply palettes。

【讨论】：