Altair：设置原始颜色值会弄乱 SortField答案

【问题标题】：Altair: Setting Raw Color Values Messes Up SortFieldAltair：设置原始颜色值会弄乱 SortField
【发布时间】：2021-06-27 23:05:55
【问题描述】：

我正在尝试创建一个 Altair 条形图，其中条形按“计数”排序，然后将 raw color values 应用于条形。

import pandas as pd
import altair as alt

# Dummy data
df = pd.DataFrame({'fruit': ['apple', 'orange', 'blueberry', 'pear', 'grape', 'kiwi', 'strawberry', 'lychee'],
                  'count': [2, 4, 1, 7, 9, 12, 16, 35], 
                  'label': ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                  'colors': ['#4c78a8', '#f58518', '#e45756', '#72b7b2', '#54a24b', '#eeca3b', '#b279a2', 
                             '#9d755d']})

def make_alt_chart(df):
    g = alt.Chart(df).encode(
        x=alt.X('count'), 
        y=alt.Y('fruit', sort=alt.SortField(field='count', order='descending'))
    ).properties(
        width=700,
        height=650,
    )
    
    bars = g.mark_bar(
        size=60,
    ).encode(
        color=alt.Color('colors', sort=alt.SortField('count', order='descending'),
                        scale=None, legend=None)
    ).properties(height=alt.Step(75))

    text = g.mark_text(
        align='center',
        baseline='middle',
        dx=28
    ).encode(
        text='label'
    ).interactive()
    
    return (bars + text)

fruits = make_alt_chart(df)

fruits

将sort=alt.SortField(field='count', order='descending') 添加到 y= 会使图表按我想要的方式排序，但是当我将 color=alt.Color('colors', sort=alt.SortField('count', order='descending'), scale=None, legend=None) 添加到条形时，y 轴上的顺序不再按“计数”排序。

这是运行上述代码后水果图表的样子：

这是我想要的输出的样子，但应用了自定义颜色：

如果有更简单的方法在 Altair 中设置自定义颜色，请告诉我。

注意：颜色的十六进制值是 tableau10 方案，但去掉了粉色阴影。

我已经查看了这些资源，但无法弄清楚：

【问题讨论】：

标签： python pandas sorting altair

【解决方案1】：

如果您查看 Javascript 控制台，您会看到渲染器正在输出此警告：

WARN Domains that should be unioned has conflicting sort properties. Sort will be set to true.

相关的Vega-Lite issue 建议了解决方法；替换

y=alt.Y('fruit', sort=alt.SortField(field='count', order='descending'))

与

y=alt.Y('fruit', sort=alt.EncodingSortField(field='count', order='descending', op='sum'))

这是结果：

【讨论】：