gpt4 book ai didi

javascript - Dimple.js:如何为分组条形图中的组背景着色?

转载 作者:太空宇宙 更新时间:2023-11-04 02:09:58 26 4
gpt4 key购买 nike

请引用截图:

Grouped Bar Chart with background of each group colored grey

我想知道如何使用背景颜色为分组条形图中的组着色。

我知道 series.afterDrawAdvanced Custom Styling Example here 所示可以是进行此类定制的一种方式。但需要帮助来确定构成每个组的坐标。

或者有什么其他方法可以达到同样的目的吗?

最佳答案

我可以通过以下方式完成此任务:

  1. 计算每组的最大值
  2. 在 y 轴上绘制最大值的背景图表
  3. 在背景图表上叠加原始数据的分组条形图

同样的代码是:

// Create the svg and set the dimensions
var svg = dimple.newSvg("#chartContainer", 400, 400);

// Sample data for grouped bar chart
var data = [
{id: 1, type: "t1", count: 10},
{id: 1, type: "t2", count: 5},
{id: 1, type: "t3", count: 6},
{id: 2, type: "t1", count: 5},
{id: 2, type: "t2", count: 7},
{id: 2, type: "t3", count: 3}];

// Calculate maximum of each group.
// This will be the y axis value of background chart
var maximums = [{id: 1, max: 10}, {id: 2, max: 7}];

// Create background chart
var chart1 = new dimple.chart(svg, maximums);
var x1 = chart1.addCategoryAxis("x", "id");
var y1 = chart1.addMeasureAxis("y", "max");
chart1.addSeries(null, dimple.plot.bar);
chart1.defaultColors = [new dimple.color("#D3D3D3")];
chart1.draw();
// Remove axis titles of the background chart
x1.titleShape.remove();
y1.titleShape.remove();

// Overlay the actual chart on top of background chart
var chart2 = new dimple.chart(svg, data);
chart2.addCategoryAxis("x", ["id", "type"]);
chart2.addMeasureAxis("y", "count");
chart2.addSeries("type", dimple.plot.bar);
chart2.draw();

图表截图如下: Grouped Bar Chart With Background Highlight

Fiddle for the same is available here

关于javascript - Dimple.js:如何为分组条形图中的组背景着色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39944297/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com