C# winform 进阶图

Question

我想在 C# winform 中制作这样的图表控件

但我找不到任何可以像这样添加多个 XY 值的组件。 我怎样才能做这些东西？ 我试过使用 Dev XtraChart。 但不能添加多个 xy 值。

Answer 1

如果您可以使用第三方图表库，您可以考虑ChartDirector。它允许将轴标签视为表格，并且您可以在表格中插入额外的行和列。

上面的图表是根据 ChartDirector 发行版中包含的示例代码之一进行修改的。原始示例代码位于http://www.advsofteng.com/doc/cdnet.htm#datatable.htm。修改后的代码如下。

// The data for the line chart
double[] data0 = { 42, 49, 33, 38, 64, 56, 29, 41, 44, 57, 59, 42 };
double[] data1 = { 65, 75, 47, 34, 42, 49, 73, 62, 90, 69, 66, 78 };
double[] data2 = { 36, 28, 25, 28, 38, 20, 22, 30, 25, 33, 30, 24 };

// Create a XYChart object of size 600 x 300 pixels
XYChart c = new XYChart(600, 300);

// Tentatively set the plotarea at (50, 10) and of (chart_width - 100) x (chart_height - 80)
// pixels in size. Set both horizontal and vertical grid lines to dotted semi-transprent black
// (aa000000).
PlotArea plotArea = c.setPlotArea(50, 10, c.getWidth() - 100, c.getHeight() - 80,
    -1, -1, -1, c.dashLineColor(unchecked((int)0xaa000000), Chart.DotLine), -1);

// y-axis labels
string[] yLabels = { "50", "100", "150", "50", "100", "150", "50", "100", "150", "50", "100", "150" };
c.yAxis().setLabels(yLabels);

// Convert the y-axis labels to a table
CDMLTable yTable = c.yAxis().makeLabelTable();
yTable.getStyle().setMargin(5, 5, 0, 0);

// Right alignment for the first and only column in the table
yTable.getColStyle(0).setAlignment(Chart.Right);

// Insert one more column
yTable.insertCol(0);
for (int i = 0; i < 4; ++i)
    yTable.setCell(0, i * 3, 1, 3, "" + (i + 2) + "(A)");

// x-axis labels
string[] xLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
c.xAxis().setLabels(xLabels);

// Convert the x-axis labels to a table
CDMLTable xTable = c.xAxis().makeLabelTable();
xTable.getStyle().setMargin2(0, 0, 3, 3);

// Set the colors of the first and only row, and also that of the plot area background
int[] colors = { 0xffdddd, 0xddffdd, 0xddddff };
for (int i = 0; i < 3; ++i)
{
    for (int j = i * 4; j < (i + 1) * 4; ++j)
        xTable.getCell(j, 0).setBackground(colors[i], 0x000000);
    c.xAxis().addZone(i * 4 - 0.5, (i + 1) * 4 - 0.5, colors[i]);
}

// Add one more row
xTable.appendRow();
xTable.setCell(0, 1, 3, 1, "Q1");
xTable.setCell(3, 1, 3, 1, "Q2").setBackground(0xff99ff, 0x000000);
xTable.setCell(6, 1, 3, 1, "Q3");
xTable.setCell(9, 1, 3, 1, "Q4").setBackground(0xff9900, 0x000000);

// Add another row
xTable.appendRow();
xTable.setCell(0, 2, 4, 1, "Alpha").setBackground(0xffff00, 0x000000);
xTable.setCell(4, 2, 6, 1, "Beta").setBackground(0x99cc99, 0x000000);
xTable.setCell(10, 2, 2, 1, "Gamma").setBackground(0x99ccff, 0x000000);

// Insert a column on the left for the row names
xTable.insertCol(0).setMargin2(5, 5, 0, 0);
xTable.setText(0, 0, "Name 1");
xTable.setText(0, 1, "Name 2");
xTable.setText(0, 2, "Name 3");

// Set the width of the row names column to the same width as the y-axis table
xTable.getColStyle(0).setWidth(yTable.getWidth());

// Add a line layer to the chart
LineLayer layer = c.addLineLayer2();
layer.setUseYAxis2();
c.yAxis2().setLinearScale(0, 100, 10);
c.yAxis2().setColors(Chart.Transparent, Chart.Transparent);

// Set the line width to 3 pixels
layer.setLineWidth(3);

// Add the three data sets to the line layer, using circles, diamands and X shapes as symbols
layer.addDataSet(data0, 0xff0000, "Quantum Computer").setDataSymbol(Chart.CircleSymbol, 9);
layer.addDataSet(data1, 0x00ff00, "Atom Synthesizer").setDataSymbol(Chart.DiamondSymbol, 11);
layer.addDataSet(data2, 0xff6600, "Proton Cannon").setDataSymbol(Chart.Cross2Shape(), 11);

// Adjust the plot area size, such that the bounding box (inclusive of axes) is 2 pixels from
// the left, right and bottom edge, and is just under the legend box.
c.packPlotArea(2, 10, c.getWidth() - 3, c.getHeight() - 3);

// Output the chart
viewer.Chart = c;

//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='[{dataSetName}] {xLabel}: {value}'");