Question

我参考下面提供的图片。我需要为我想要显示的某种格式的数据制作它。当我尝试做一些修改时，我没有成功地做出我需要的东西。这是我所指的代码和代码的示例图片。

http://i61.tinypic.com/2qbdjeh.png

<div class="row mt">
                  <!--CUSTOM CHART START -->
                  <div class="border-head">
                      <h3>VISITS</h3>
                  </div>
                  <div class="custom-bar-chart">
                      <ul class="y-axis">
                          <li><span>10.000</span></li>
                          <li><span>8.000</span></li>
                          <li><span>6.000</span></li>
                          <li><span>4.000</span></li>
                          <li><span>2.000</span></li>
                          <li><span>0</span></li>
                      </ul>
                      <div class="bar">
                          <div class="title">JAN</div>
                          <div class="value tooltips" data-original-title="8.500" data-toggle="tooltip" data-placement="top">85%</div>                   
                      </div>
                      <div class="bar ">
                          <div class="title">FEB</div>
                          <div class="value tooltips" data-original-title="5.000" data-toggle="tooltip" data-placement="top">50%</div>
                      </div>
                      <div class="bar ">
                          <div class="title">MAR</div>
                          <div class="value tooltips" data-original-title="6.000" data-toggle="tooltip" data-placement="top">60%</div>
                      </div>
                      <div class="bar ">
                          <div class="title">APR</div>
                          <div class="value tooltips" data-original-title="4.500" data-toggle="tooltip" data-placement="top">45%</div>
                      </div>
                      <div class="bar">
                          <div class="title">MAY</div>
                          <div class="value tooltips" data-original-title="3.200" data-toggle="tooltip" data-placement="top">32%</div>
                      </div>
                      <div class="bar ">
                          <div class="title">JUN</div>
                          <div class="value tooltips" data-original-title="6.200" data-toggle="tooltip" data-placement="top">62%</div>
                      </div>
                      <div class="bar">
                          <div class="title">JUL</div>
                          <div class="value tooltips" data-original-title="7.500" data-toggle="tooltip" data-placement="top">75%</div>
                      </div>
                  </div>
                  <!--custom chart end-->
                </div><!-- /row -->

Answer 1

如果您使用的是Chart.js，则可以用canvas元素替换所有标记。像这样

<强> HTML

<div class="myChartWrapper">
   VISITS
    <br /><br />
   <canvas id="myChart" width="800" height="400"></canvas>
</div>

<强> CSS

.myChartWrapper {
    font-family: Helvetica;
    color: #999;
    background-color: #eee;
    display: inline-block;
    padding: 20px;
}

.myChartWrapper > * {
   display: block;
}

<强> JS

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(254, 133, 92, 1)",
        highlightFill: "rgba(100,100,100,1)",
        data: [8000, 5000, 3000, 5000, 9000, 8000, 6000]
    }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data, {
    scaleOverride: true,
    barValueSpacing : 30,
    scaleSteps: 5,
    scaleStepWidth: 2000,
    scaleStartValue: 0,
});

小提琴 - http://jsfiddle.net/Lp6oujk3/

如何在图表的某一部分制作2条

1 个答案: