绘制多系列酒窝图折线图时,测量轴合计值。如何避免

耶尔瓦尼

我正在使用dimple.js库绘制多系列折线图。我面临的问题是,将x轴重复值相加并绘制为图形中的单个点。这是我的示例http://jsfiddle.net/geervani/jcow2y4u/8/在下面的数据中,对于KM 240000,有两个MM值-8和14。应将其绘制为2个不同的点。但是渲染的图表在(22,240000)处只有1点。点8和14相加。这怎么解决。请提出建议。

 var chartdata = [{
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 128000,
            "MM": 22
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 145000,
            "MM": 20
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 195000,
            "MM": 17
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 240000,
            "MM": 8
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 240000,
            "MM": 14
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 300000,
            "MM": 12
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 429117.39,
            "MM": 3
    }];

    var svg = dimple.newSvg("#chartContainer", '100%', '100%');

    // Create and Position a Chart
    var myChart = new dimple.chart(svg, chartdata);
    myChart.setMargins(50, 10, 10, 50);
    //myChart.setBounds(30, '0px', '95%', '100%');

    var x = myChart.addCategoryAxis("x", "KM");
    x.showGridlines = false;
    var y = myChart.addMeasureAxis("y", "MM");
    y.showGridlines = false;
    y.ticks = 5;

    // Min price will be green, middle price yellow and max red
    //myChart.addColorAxis("KM", ["green", "yellow", "red"]);

    // Add a thick line with markers
    myChart.addSeries("Tyre", dimple.plot.bubble);

    var s = myChart.addSeries("Tyre", dimple.plot.line);

    // Add line markers to the line because it looks nice
    s.lineMarkers = true;
    // Draw the chart
    myChart.draw();

在此处输入图片说明

谢谢,杰尔瓦尼

约翰·基恩南德

Dimple根据您的代码中定义的维度预聚合您的数据。这意味着您需要某种方式来区分数据中的行,否则它们将被汇总。您应该考虑什么使一行与另一行有所不同,然后将其捕获到数据中。例如,我假设它们是观察值,并给它们编号:

for (var i = 0; i < chartdata.length; i += 1) {
    chartdata[i]["Observation"] = i;
}

然后在系列数组中引用此新维度:

var s = myChart.addSeries(["Observation", "Tyre"], dimple.plot.line);

当然,如果您可以包括某种时间值或更有意义的方式来区分行在现实世界中实际涉及的内容,那将是可取的,但这是此示例的工作方式:http : //jsfiddle.net/jcow2y4u/11/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

条形图和折线图在X轴上的值不匹配

来自分类Dev

如何在双Y轴图中的ggvis中对齐条形图和折线图?

来自分类Dev

如何在高图中绘制带有系列数据的折线图?

来自分类Dev

如何在ggplot2中使用重复的x轴标签绘制折线图

来自分类Dev

高图-用折线图绘制折线图,但在悬停时会显示分解

来自分类Dev

如何使用python熊猫绘制多折线图?

来自分类Dev

多系列折线图

来自分类Dev

如何在Google折线图中以某个值停止绘制系列

来自分类Dev

如何在具有多个y轴的多折线图上绘制数据点

来自分类Dev

如何绘制带有分类和数字(基准)轴的折线图?

来自分类Dev

d3.js如何绘制带有垂直x轴标签的折线图

来自分类Dev

如何在ggplot2中绘制组合的条形图和折线图

来自分类Dev

如何在条形图和折线图的同一图上绘制多个列表?

来自分类Dev

如何在python中绘制“多线”折线图?

来自分类Dev

如何绘制混合的条形图和折线图并获取x轴作为年份

来自分类Dev

如何绘制混合的条形图和折线图并获取x轴作为年份

来自分类Dev

高图-如何强制折线图在X轴上方可见

来自分类Dev

在Excel中使用数字X轴绘制折线图

来自分类Dev

如何绘制具有重复日期值的折线图?

来自分类Dev

多折线图

来自分类Dev

D3.js:使用长格式数据在多系列折线图中的现有折线上绘制点

来自分类Dev

如何创建多系列折线图

来自分类Dev

如何在双Y轴图中的ggvis中对齐条形图和折线图?

来自分类Dev

如何使用python熊猫绘制多折线图?

来自分类Dev

D3过渡时退出多系列折线图标签

来自分类Dev

Python:使用 DataFrame 绘制折线图和条形图时 DatetimeIndex 的不同行为

来自分类Dev

如何在折线图的 y 轴上绘制多个 Pandas 列

来自分类Dev

如何绘制多个折线图(意大利面条图)?尝试时出现“无效的 RGBA 参数:2000”错误?

来自分类Dev

在matlibplot中绘制折线图时如何偏移x轴

Related 相关文章

  1. 1

    条形图和折线图在X轴上的值不匹配

  2. 2

    如何在双Y轴图中的ggvis中对齐条形图和折线图?

  3. 3

    如何在高图中绘制带有系列数据的折线图?

  4. 4

    如何在ggplot2中使用重复的x轴标签绘制折线图

  5. 5

    高图-用折线图绘制折线图,但在悬停时会显示分解

  6. 6

    如何使用python熊猫绘制多折线图?

  7. 7

    多系列折线图

  8. 8

    如何在Google折线图中以某个值停止绘制系列

  9. 9

    如何在具有多个y轴的多折线图上绘制数据点

  10. 10

    如何绘制带有分类和数字(基准)轴的折线图?

  11. 11

    d3.js如何绘制带有垂直x轴标签的折线图

  12. 12

    如何在ggplot2中绘制组合的条形图和折线图

  13. 13

    如何在条形图和折线图的同一图上绘制多个列表?

  14. 14

    如何在python中绘制“多线”折线图?

  15. 15

    如何绘制混合的条形图和折线图并获取x轴作为年份

  16. 16

    如何绘制混合的条形图和折线图并获取x轴作为年份

  17. 17

    高图-如何强制折线图在X轴上方可见

  18. 18

    在Excel中使用数字X轴绘制折线图

  19. 19

    如何绘制具有重复日期值的折线图?

  20. 20

    多折线图

  21. 21

    D3.js:使用长格式数据在多系列折线图中的现有折线上绘制点

  22. 22

    如何创建多系列折线图

  23. 23

    如何在双Y轴图中的ggvis中对齐条形图和折线图?

  24. 24

    如何使用python熊猫绘制多折线图?

  25. 25

    D3过渡时退出多系列折线图标签

  26. 26

    Python:使用 DataFrame 绘制折线图和条形图时 DatetimeIndex 的不同行为

  27. 27

    如何在折线图的 y 轴上绘制多个 Pandas 列

  28. 28

    如何绘制多个折线图(意大利面条图)?尝试时出现“无效的 RGBA 参数:2000”错误?

  29. 29

    在matlibplot中绘制折线图时如何偏移x轴

热门标签

归档