结合 100% 堆叠面积和柱形图系列,强制值轴仅使用柱形系列值
Combining 100% stacked area and column chart series, force value axis to use column series values only
我想制作一个包含 100% 堆积面积系列(显示为底图)和柱形系列的图表。堆叠的系列值将是 1 或 null
(即垂直填充或不显示)。我希望值轴仅使用列系列而忽略堆叠区域系列。
这是一个显示行为的简单图表定义:
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item type="column" [data]="[5, 3, 2, 1, 6, 8]">
</kendo-chart-series-item>
<kendo-chart-series-item type="area" [line]="{ style: 'step' }" [stack]="{ type: '100%' }" [data]="[1, 1, 1, null, null, 1]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
这是一个笨蛋:
http://plnkr.co/edit/nATHiFiqr8cTVQxg20Ez?p=preview
数值系列标签不应显示 0-800%,而应显示 0-8。这有可能实现吗?
我通过为每个系列添加单独的值轴配置、隐藏堆叠区域轴并强制列轴格式化为数字而不是百分比来解决这个问题。
<kendo-chart>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item>
<kendo-chart-value-axis-item-labels format="n"></kendo-chart-value-axis-item-labels>
</kendo-chart-value-axis-item>
<kendo-chart-value-axis-item [visible]="false" name="secondAxis">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series>
<kendo-chart-series-item type="column" [data]="[5, 3, 2, 1, 6, 8]">
</kendo-chart-series-item>
<kendo-chart-series-item axis="secondAxis" type="area" [line]="{ style: 'step' }" [stack]="{ type: '100%' }" [data]="[1, 1, 1, null, null, 1]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
Plunker 演示:
我想制作一个包含 100% 堆积面积系列(显示为底图)和柱形系列的图表。堆叠的系列值将是 1 或 null
(即垂直填充或不显示)。我希望值轴仅使用列系列而忽略堆叠区域系列。
这是一个显示行为的简单图表定义:
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item type="column" [data]="[5, 3, 2, 1, 6, 8]">
</kendo-chart-series-item>
<kendo-chart-series-item type="area" [line]="{ style: 'step' }" [stack]="{ type: '100%' }" [data]="[1, 1, 1, null, null, 1]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
这是一个笨蛋:
http://plnkr.co/edit/nATHiFiqr8cTVQxg20Ez?p=preview
数值系列标签不应显示 0-800%,而应显示 0-8。这有可能实现吗?
我通过为每个系列添加单独的值轴配置、隐藏堆叠区域轴并强制列轴格式化为数字而不是百分比来解决这个问题。
<kendo-chart>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item>
<kendo-chart-value-axis-item-labels format="n"></kendo-chart-value-axis-item-labels>
</kendo-chart-value-axis-item>
<kendo-chart-value-axis-item [visible]="false" name="secondAxis">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series>
<kendo-chart-series-item type="column" [data]="[5, 3, 2, 1, 6, 8]">
</kendo-chart-series-item>
<kendo-chart-series-item axis="secondAxis" type="area" [line]="{ style: 'step' }" [stack]="{ type: '100%' }" [data]="[1, 1, 1, null, null, 1]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
Plunker 演示: