javascript图表框架将两个图表一起绘制

Question

我使用highcharts绘图，效果很好。现在我需要绘制两个图表并且它们在某种意义上是绑定在一起。

我在highcharts演示中没有找到这个，最接近的plotting two charts in the same plot。有一个名字可以称之为？是否有任何现有的图表框架来处理这个问题？

Answer 1

根据您的链接和嵌入的图片，您要求的内容并不完全清楚。但是，有很多图表库可能会完成您正在寻找的内容。以下示例是使用ZingChart构建的。

您似乎正在寻找共享工具提示。随附的代码段演示了这一点。运行代码段以查看图表。

＆＃13;

＆＃13;

var myChart = {
  "graphset": [{
    "type": "line",
    "id": "chart1",
    "legend": {
      "shared": true,
      "layout": "h"
    },
    "plotarea": {
      "margin": "35 50"
    },
    "scaleX": {
      "zooming": true
    },
    "zoom": {
      "shared": true
    },
    "crosshair-x": {
      "shared": true,
      "plot-label": {
        "multiple": false
      }
    },
    "scaleY": {

    },
    "plot": {

    },
    "tooltip": {
      "visible": false
    },
    "series": [{
      "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
      "text": "Apple"
    }, {
      "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
      "text": "Microsoft"
    }, {
      "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
      "text": "Oracle"
    }, {
      "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
      "text": "Dell"
    }]
  }, {
    "type": "line",
    "id": "chart2",
    "legend": {
      "visible": false,
      "shared": true
    },
    "plotarea": {
      "margin": "35 50"
    },
    "scaleX": {
      "zooming": true
    },
    "zoom": {
      "shared": true
    },
    "scaleY": {

    },
    "crosshair-x": {
      "shared": true,
      "plot-label": {
        "multiple": false,
        "visible": false,
        "offset-x": 15
      }
    },
    "plot": {

    },
    "tooltip": {
      "visible": false
    },
    "series": [{
      "values": [79, 65, 34, 41, 40, 64, 95, 72, 78, 64, 59, 49],
      "text": "Apple"
    }, {
      "values": [53, 63, 57, 50, 49, 57, 74, 62, 66, 57, 69, 68],
      "text": "Microsoft"
    }, {
      "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
      "text": "Oracle"
    }, {
      "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
      "text": "Dell"
    }]
  }]
};

zingchart.render({
  id: "myChart",
  height: "300px",
  width: "100%",
  data: myChart
});

＆＃13;

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

＆＃13;

＆＃13;

＆＃13;

It also allows you to share information across multiple charts.（这使用预览图表进行缩放。）

如果您更关心的是在没有共享工具提示的情况下在一个地块中创建两个图表，you can see an example of that here.

如果您想澄清您想要做的事情，或者想了解更多关于这些演示的信息，请随时给我留言或者联系到support@zingchart.com，我在ZingChart团队并且开心讨论。

Answer 2

你可能正在寻找stock charts，amCharts将是一个非常好的选择，非常容易处理