没有jQuery和光标绘图的交互式javascript图表

Question

我正在尝试为JS找到一个免费的图表库，它不需要jQuery，并且能够在指定的位置添加垂直光标条。互动性会很好。我只需要折线图，不需要甜甜圈。有谁知道这个生物是否存在？

Answer 1

＆＃13;

＆＃13;

var chartJSON = {
  "type": "line",
  "background-color": "#fff",
  "border-color": "#dae5ec",
  "border-width": "1px",
  "title": {
    "margin-top": "7px",
    "margin-left": "12px",
    "text": "TODAY'S SALES",
    "background-color": "none",
    "shadow": 0,
    "text-align": "left",
    "font-family": "Arial",
    "font-size": "11px",
    "font-color": "#707d94"
  },
  "plot": {
    "animation": {
      "effect": "ANIMATION_SLIDE_LEFT"
    }
  },
  "plotarea": {
    "margin": "50px 25px 70px 46px"
  },
  "scale-y": {
    "values": "0:100:25",
    "line-color": "none",
    "guide": {
      "line-style": "solid",
      "line-color": "#d2dae2",
      "line-width": "1px",
      "alpha": 0.5
    },
    "tick": {
      "visible": false
    },
    "item": {
      "font-color": "#8391a5",
      "font-family": "Arial",
      "font-size": "10px",
      "padding-right": "5px"
    }
  },
  "scale-x": {
    "line-color": "#d2dae2",
    "line-width": "2px",
    "values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    "tick": {
      "line-color": "#d2dae2",
      "line-width": "1px"
    },
    "guide": {
      "visible": "false"
    },
    "markers": [{
      "type": "area",
      "range": [5, 7],
      "background-color": "red",
      "alpha": 0.3,
      "label": {
        "text": "Summer Sale",
        "alpha": 0.5
      }
    }],
    "item": {
      "font-color": "#8391a5",
      "font-family": "Arial",
      "font-size": "10px",
      "padding-top": "5px"
    }
  },
  "legend": {
    "layout": "2x2",
    "background-color": "none",
    "shadow": 0,
    "margin": "auto auto 15 auto",
    "border-width": 0,
    "item": {
      "font-color": "#707d94",
      "font-family": "Arial",
      "padding": "0px",
      "margin": "0px",
      "font-size": "9px"
    },
    "marker": {
      "show-line": "true",
      "type": "match",
      "font-family": "Arial",
      "font-size": "10px",
      "size": 4,
      "line-width": 2,
      "padding": "3px"
    }
  },
  "crosshair-x": {
    "lineWidth": 1,
    "line-color": "#707d94",
    "plotLabel": {
      "shadow": false,
      "font-color": "#ffffff",
      "font-family": "Arial",
      "font-size": "10px",
      "padding": "5px 10px",
      "border-radius": "5px",
      "alpha": 1
    },
    "scale-label": {
      "font-color": "#ffffff",
      "background-color": "#707d94",
      "font-family": "Arial",
      "font-size": "10px",
      "padding": "5px 10px",
      "border-radius": "5px"
    }
  },
  "tooltip": {
    "visible": false
  },
  "series": [{
    "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
    "text": "Kenmore",
    "line-color": "#4dbac0",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#36a2a8",
      "shadow": 0
    },
    "palette": 0
  }, {
    "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
    "text": "Craftsman",
    "line-width": "2px",
    "line-color": "#25a6f7",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#1993e0",
      "shadow": 0
    },
    "palette": 1,
    "visible": 1
  }, {
    "values": [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
    "text": "DieHard",
    "line-color": "#ad6bae",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#975098",
      "shadow": 0
    },
    "palette": 2,
    "visible": 1
  }, {
    "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
    "text": "Land's End",
    "line-color": "#f3950d",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#d37e04",
      "shadow": 0
    },
    "palette": 3
  }]
}


zingchart.render({
  id: "myChart",
  height: 300,
  width: 500,
  data: chartJSON
});

＆＃13;

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

<div id="myChart"></div>

＆＃13;

＆＃13;

＆＃13;

你指的是这样的东西吗？这是使用ZingChart完成的，可以免费使用。在x轴上设置标记，其范围和不透明度降低。

如果您正在寻找其他内容，请告诉我，我会将另一个演示放在一起。我是ZingChart的团队，很乐意提供帮助：）

Answer 2

您可以使用amCharts执行此操作，此处为stacked area chart demo。如果您不需要填充，只需将fillAlphas设置为0.并将值轴的stackType设置为“none”

免责声明：我是amCharts的作者。

Answer 3

以下是使用example制作的D3js Framework，您可能感兴趣..