使用给定的 javascript 库之一创建图表

Posted 2023-02-22

【中文标题】使用给定的 javascript 库之一创建图表

【英文标题】：Create chart using one of the given javascript libraries

【发布时间】：2019-12-09 12:58:40

【问题描述】：

我正在尝试使用 ChartJS、D3.js、NVD3 或 c3.js 创建一个看起来像这样的图表，但我遇到了麻烦。这些库中的任何一个都可以做到这一点吗？

【参考方案1】：

您可以使用 C3.js 条形图并隐藏一些 x 轴，但这可能需要额外的 JS 才能执行此操作，除非您将 x 轴标签设为“”。如果您希望所有条形图都具有相同的颜色，则需要使用 CSS（除非您声明了模式）。如果没有额外的代码操作，它不会生成看起来与 C3.js 中的相同。 您可以在 https://c3js.org/samples/chart_bar.html 上编辑数据，如果您愿意，可以查看数据的外观。

你可以添加

color: 
        pattern: ['#0e9999','#06754b','#eb7a02','#9734b0']
    ,

对于你想要的任何颜色模式的图表（你可以有尽可能多或尽可能少的颜色。我的代码恰好需要 4 个）

你可以这样做

color: 
        pattern: ['#FFA500']
    ,

在数据中，您可以声明一个“x”来提供您提供的 x 个标签

    data: 
        x: 'x',
        columns: [your data goes here including x labels],
        type: 'bar'
    

我不确定其他库，但 C3.js 本质上是 D3.js 的包装器，因此可以在一个库中完成的任何事情在理论上很可能在两者中都是可行的。 C3.js 只是更容易理解代码。 （见：https://c3js.org/）

更新： 如果这还不够清楚，您可以这样做：

var chart = c3.generate(
data: 
      x: 'x',
    columns: [
        ['x', '1',' .','3','. ','. ','6'],
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    type: 'bar'
,
  axis: 
        x: 
            type: 'category',

        ,
color: 
    pattern: ['#FFA500']
,
bar:  
    space: 0.05, //sets the gap between the bars
    width: ratio:1
,
grid:  //the lines (remove if you didn't want grid lines)
        y: 
            show: true 
        ,
        x: 
            show: true 
        
    ,
legend:  //hides the legends 
    show: false

);

要做与您所拥有的类似的事情（您需要将数据编辑为您想要的确切数据，但这只是您自己的简单编辑）

如果您不想要虚线网格线，请添加：

.c3 .c3-grid line 
  stroke-dasharray: 0!important;
  stroke: #808080 !important;
  

到你的 CSS 文件

【讨论】：

为什么我被否决了？请给我反馈，以便我改进我的答案:)

我更新了完整的图表代码，希望现在更好

【参考方案2】：

我在 React 中使用 recharts。我认为这是目前最好的图表库。